@extends('layouts.app',['title'=>"Pelanggan Aktif"])
@push('styles')
    <!-- JQuery DataTable Css -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .grid-container {
            display: grid;
            gap: 1rem;
            /* Adjust the gap between grid items */
        }

        .grid-container-center {
            display: grid;
            gap: 1rem;
            /* Adjust the gap between grid items */
            justify-content: center;
            /* Center the grid items horizontally */
        }

        .info-box.big {
            height: 200px;
        }

        .info-box.big .icon {
            width: 200px !important;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .info-box.big .content {

            display: flex;
            align-items: center;
        }

        .info-box.big .content .text {

            font-size: 2rem;
        }

        .info-box.big .content .number {

            font-size: 3rem;
        }

        .info-box.big .icon i {
            font-size: 12rem !important;
            /* Adjust icon size */
        }


        .grid-col-1 {
            grid-template-columns: repeat(1, 1fr);
        }

        .grid-col-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .grid-col-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .grid-col-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        .grid-col-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        .grid-col-6 {
            grid-template-columns: repeat(6, 1fr);
        }

        /* For large screens (desktops) - 5 columns */
        @media (min-width: 1200px) {
            /* .grid-container {
                    grid-template-columns: repeat(6, 1fr);
                } */
        }

        /* For medium screens (tablets) - 3 columns */
        @media (min-width: 768px) and (max-width: 1199px) {
            /* .grid-container {
                    grid-template-columns: repeat(3, 1fr);
                } */


            .grid-col-5 {
                grid-template-columns: repeat(3, 1fr);
            }

            .grid-col-6 {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* For small screens (mobile) - 1 column */
        @media (max-width: 767px) {

            .grid-container,
            .grid-container-center {
                grid-template-columns: 1fr;
            }

            .info-box.big {
                height: 150px;
            }

            .info-box.big .icon {
                width: 150px !important;

            }

            .info-box.big .content .text {

                font-size: 13px;
            }

            .info-box.big .content .number {

                font-size: 26px;
            }

            .info-box.big .icon i {
                font-size: 6rem !important;
                /* Adjust icon size */
            }


        }

        /* Optional: for some basic styling of the grid items */
        .grid-item {
            background-color: #f4f4f4;
            padding: 1.5rem;
            text-align: center;
            border: 1px solid #ddd;
        }

        .grid-container-auto {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    </style>

@endpush
@push('scripts')
    {{-- data Table --}}
    <script src="{{ url('material') }}/js/pages/tables/jquery-datatable.js"></script>
    <script src="{{ url('material') }}/plugins/jquery-datatable/jquery.dataTables.js"></script>
    <script src="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
    {{-- data Table --}}
    <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() {
        //         $('#pelangganTable').DataTable({
        //             responsive: true,
        //         });

        //     });
        $(function () {
            $('#daterange').daterangepicker({
                opens: 'right',
                locale: {
                    format: 'DD/MM/YYYY',
                    cancelLabel: 'Clear',
                },
                showCustomRangeLabel: true,
                alwaysShowCalendars: true,
                autoUpdateInput: false,
                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')],
                        'Semua Waktu': [moment().subtract(10, 'year'), moment().add(10, 'year')]
                }
            }, 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
                $("#daterange").val(start.format('DD/MM/YYYY') + ' - ' + end
                    .format('DD/MM/YYYY'))
                setTimeout(function () {
                    $("#filter-form").submit();
                }, delayInMilliseconds);

            }).on("apply.daterangepicker", function (e, picker) {
                $("#daterange").val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate
                    .format('DD/MM/YYYY'));
                setTimeout(function () {
                    $("#filter-form").submit();
                }, 500);
            });


        });
    </script>
@endpush

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


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

                    </div>
                    <div class="body">
                        <div class="grid-container grid-col-5">
                            <div class="info-box hover-zoom-effect">
                                <div class="icon bg-blue">
                                    <i class="material-icons">stars</i>
                                </div>
                                <div class="content">
                                    <div class="text">Super Loyal</div>
                                    <div class="number">{{ $jumlahSuperLoyal }}</div>
                                </div>
                            </div>
                            <div class="info-box hover-zoom-effect">
                                <div class="icon bg-amber">
                                    <i class="material-icons">local_atm
                                    </i>
                                </div>
                                <div class="content">
                                    <div class="text">Loyal Aktif</div>
                                    <div class="number">{{ $jumlahLoyalAktif }}</div>
                                </div>
                            </div>
                            <div class="info-box hover-zoom-effect">
                                <div class="icon bg-blue">
                                    <i class="material-icons">new_releases
                                    </i>
                                </div>
                                <div class="content">
                                    <div class="text">Potensi Loyal</div>
                                    <div class="number">{{ $jumlahPotensiLoyal }}</div>
                                </div>
                            </div>
                            <div class="info-box hover-zoom-effect">
                                <div class="icon bg-red">
                                    <i class="material-icons">slow_motion_video
                                    </i>
                                </div>
                                <div class="content">
                                    <div class="text">Pasif</div>
                                    <div class="number">{{ @$jumlahPasif }}</div>
                                </div>
                            </div>
                            <div class="info-box hover-zoom-effect">
                                <div class="icon bg-green">
                                    <i class="material-icons">fiber_new</i>
                                </div>
                                <div class="content">
                                    <div class="text">Baru</div>
                                    <div class="number">{{ $jumlahBaru }}</div>
                                </div>
                            </div>


                        </div>
                        <div class="d-flex row justify-content-between">
                            <form action="" id="filter-form" class="col-lg-2">
                                <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"
                                            placeholder="Semua hari">
                                    </div>
                                </div>
                            </form>
                            <form action="" id="form" class="col-lg-6">
                                <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-12 col-md-3 "
                                        style="display: flex; justify-content: space-between; align-items: center; gap: 20px">
                                        <div class="input-group" style="width: 50%">
                                            <span class="input-group-addon">
                                                <i class="material-icons">person</i>
                                            </span>
                                            <div class="form-line" sty>
                                                <input class="form-control" placeholder="Nama/No Telp/Alamat"
                                                    name="nama_pelanggan" value="{{ $request->nama_pelanggan }}">
                                            </div>

                                        </div>
                                        <div class="input-group">
                                            <select name="kecamatan" id="kecamatan" class="form-control w-25">
                                                <option value="">Pilih Kecamatan</option>
                                                @foreach ($dataKecamatan as $key => $value)
                                                    <option value="{{ $value->kecamatan_pelanggan }}">
                                                        {{ $value->kecamatan_pelanggan }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="input-group w-25" style="width: 25%">
                                            <button class="btn btn-primary">Cari</button>
                                        </div>

                                    </div>

                                </div>
                            </form>
                            <div class="col-lg-3 col-md-3"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="text-center" style="">
                                    <h4>Jumlah Pelanggan</h4>
                                    <h5>{{ $countAll }}</h5>
                                </div>
                                <form action="{{ route('laporan.daftarPelanggan.print') }}" target="_blank"
                                    class="row flex-column-reverse">
                                    <div class="col-md-6">
                                        <input type="hidden" class="form-control" name="periode" id="daterange"
                                            value="@if (isset($periode)) {{ $periode[0] }} - {{ $periode[1] }} @endif">
                                        <input type="hidden" class="form-control" name="begin"
                                            value="{{ $begin->format('Ymd H:i:s') }}">
                                        <input type="hidden" class="form-control" name="kecamatan"
                                            value="{{ request()->kecamatan }}">
                                        <input type="hidden" class="form-control" name="order"
                                            value="{{ request()->order }}">
                                        <input type="hidden" class="form-control" name="sorting_order"
                                            value="{{ $sorting_order }}">
                                    </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>

                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover dashboard-task-infos datatable" id="pelangganTable">
                                <thead>
                                    <tr>
                                        <th>
                                            Nama
                                        </th>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'jumlah_transaksi', 'sorting_order' => $sorting_order]) }}">
                                                Frekuensi Transaksi
                                            </a>
                                        </th>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'nominal', 'sorting_order' => $sorting_order]) }}">
                                                Total Nominal Transaksi
                                            </a>
                                        </th>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'times_diff', 'sorting_order' => $sorting_order]) }}">
                                                Durasi
                                            </a>
                                        </th>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'total_review', 'sorting_order' => $sorting_order]) }}">
                                                Rating Puas
                                            </a>
                                        </th>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'jumlah_referral', 'sorting_order' => $sorting_order]) }}">
                                                Teman yang Diajak
                                            </a>
                                        </th>

                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'skor_loyalitas', 'sorting_order' => $sorting_order]) }}">
                                                Skor Loyalitas
                                            </a>
                                        </th>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'skor_loyalitas', 'sorting_order' => $sorting_order]) }}">
                                                Kategori Pelanggan
                                            </a>
                                        </th>
                                        <th>
                                            Tools
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($datas as $data)
                                        <tr>
                                            <td>
                                                {{ $data->nama_pelanggan }}
                                                <br>
                                                ({{ $data->telp_pelanggan }})
                                            </td>
                                            <td>
                                                {{ $data->jumlah_transaksi }}
                                            </td>
                                            <td>
                                                <a href="{{ route('pelanggan.show', $data->id) }}" target="_blank">
                                                    Rp. {{ number_format($data->total_nominal) }}
                                                </a>
                                            </td>
                                            <td>
                                                {{ $data->durasi_label }}
                                            </td>
                                            <td>
                                                {{ $data->total_review }}
                                            </td>
                                            <td>
                                                {{ $data->jumlah_referral }}
                                            </td>
                                            <td>
                                                {{ $data->skor_loyalitas }}
                                            </td>
                                            <td>
                                                {{ $data->kategori_pelanggan }}
                                            </td>
                                            <td>
                                                {{-- <div class="btn-group btn-block">
                                                    <button type="button"
                                                        class="btn btn-default btn-block waves-effect dropdown-toggle"
                                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Action <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu">

                                                        @foreach ($promos as $promo)
                                                        <li>
                                                            <a
                                                                href="{{ route('pelanggan-aktif.action',['id'=>$data->id,'action_id'=>$promo->id]) }}">{{
                                                                $promo->judul }}</a>
                                                        </li>
                                                        @endforeach


                                                    </ul>
                                                </div> --}}
                                                <a href="{{ route('pelanggan.referral.index', ['pelanggan_id'=>$data->id]) }}" class="btn btn-success">Kode Ajak Teman</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="9">
                                            {{ $datas->links() }}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #END# Task Info -->
        </div>
    </div>
@endsection