@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 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',
                    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')]
                }
            }, 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</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">
                        @if (\Helper::hakAkses('master_data', 'create'))
                            <a href="{{ route('pelanggan.create') }}" class="btn btn-primary">Tambah Customer</a>
                        @endif
                    </div>
                    <div class="body">
                        <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(request()->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="kategori"
                                            value="@if (isset($item_kategori)) {{ $item_kategori }} @endif">
                                        <input type="hidden" class="form-control" name="end"
                                            value="{{ $end->format('Ymd H:i:s') }}">
                                        <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">
                                <thead>
                                    <tr>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'nama', 'sorting_order' => $sorting_order]) }}">
                                                Nama</a>
                                        </th>
                                        <th><a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'telp', 'sorting_order' => $sorting_order]) }}">
                                                No. Telepon</a> </th>
                                        <th><a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'kecamatan', 'sorting_order' => $sorting_order]) }}">
                                                Kecamatan</a> </th>
                                        <th><a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'alamat', 'sorting_order' => $sorting_order]) }}">
                                                Alamat</a> </th>
                                        <th>
                                            <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'nominal', 'sorting_order' => $sorting_order]) }}">
                                                Nominal Transaksi</a>
                                        </th>
                                        <th> <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'total', 'sorting_order' => $sorting_order]) }}">
                                                Total Transaksi</a> </th>
                                        <th> <a style="color:#555555;"
                                                href="{{ request()->fullUrlWithQuery(['order' => 'waktu', 'sorting_order' => $sorting_order]) }}">
                                                Waktu Daftar</a> </th>
                                        <th>Tools</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($datas as $data)
                                        <tr>
                                            <td>{{ $data->nama_pelanggan }}</td>
                                            <td>{{ $data->telp_pelanggan }}</td>
                                            <td>{{ $data->kecamatan_pelanggan }}</td>
                                            <td>{{ $data->alamat_pelanggan }}</td>
                                            <td><a href="{{ route('pelanggan.show', $data->id) }}">
                                                    Rp. {{ number_format($data->riwayat->sum('biaya')) }}
                                                </a>
                                            </td>
                                            <td>{{ count($data->riwayat) }}
                                            </td>
                                            <td>{{ $data->created_at ? $data->created_at->toDateTimeString() : "-" }}
                                            </td>
                                            <td>
                                                @if (\Helper::hakAkses('master_data', 'edit'))
                                                    <a href="{{ route('pelanggan.edit', $data->id) }}"
                                                        class="btn btn-primary">Edit</a>
                                                @endif
                                                @if (\Helper::hakAkses('master_data', 'delete'))
                                                    <form action="{{ route('pelanggan.destroy', $data->id) }}" method="POST"
                                                        style="display:inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger"
                                                            id="hapus-button">Delete</button>
                                                    </form>
                                                @endif
                                            </td>
                                    @endforeach
                                </tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="8">
                                            {{-- @include('layouts.includes.pagination') --}}

                                            {{ $datas->links() }}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #END# Task Info -->
        </div>
    </div>
@endsection