@extends('admin.user._layout')

@section('panel-option')
    <ul class="nav nav-pills">
        <li class="nav-item"><a href="#tab2" class="nav-link active" data-toggle="tab" role="button"
                aria-expanded="false">Akun</a></li>
        <li class="nav-item"><a href="#tab1" class="nav-link" data-toggle="tab" role="button"
                aria-expanded="false">Performa</a></li>
        <li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab" role="button"
                aria-expanded="false">Referral</a></li>
    </ul>
@endsection
@section('panel-body')
    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in">
            {{-- <canvas id="performanceChart"></canvas> --}}
            <table class="table table-bordered">
                <tr>
                    <th>Level Mitra</th>
                    <td class="text-capitalize">{{ $performance['level'] }}</td>
                </tr>
                <tr>
                    <th>Total Order</th>
                    <td>{{ $performance['orders'] }} Pesanan</td>
                </tr>

                <tr>
                    <th>Total Penjualan Team</th>
                    <td>{{ $performance['order_team_total_rupiah'] }}</td>
                </tr>
                <tr>
                    <th>Total Penjualan (pribadi)</th>
                    <td>{{ $performance['order_total_rupiah'] }}</td>
                </tr>
                <tr>
                    <th>Total Penjualan (downline)</th>
                    <td>{{ $performance['order_downline_total_rupiah'] }}</td>
                </tr>
                <tr>
                    <th>Target Belum Tercapai</th>
                    <td>{{ $performance['order_target_rupiah'] }}</td>
                </tr>
                <tr>
                    <th>Total Insentif</th>
                    <td>{{ $performance['incentive_total_rupiah'] }}</td>
                </tr>
                <tr>
                    <th>Insentif Dicairkan</th>
                    <td>{{ $performance['incentive_disbursed_rupiah'] }}</td>
                </tr>
                <tr>
                    <th>Insentif Belum Dicairkan</th>
                    <td>{{ $performance['incentive_balance_rupiah'] }}</td>
                </tr>
                <tr>
                    <th>Bonus</th>
                    <td>{{ $performance['incentive_bonus_rupiah'] }}</td>
                </tr>
            </table>

            <form cemes="form" method="POST" action="{{ route('admin.old.user.mitra.recount', $user->id) }}">
                @csrf
                <button class="btn btn-sm btn-default">Recount</button>
            </form>
        </div>
        <div id="tab2" class="tab-pane fade active show">
            <form cemes="form" method="POST" action="{{ route('admin.old.user.mitra', $user->id) }}">
                @csrf

                <div class="form-group">
                    <label for="#is_active">Status Verifikasi</label>
                    <select name="is_active" id="is_active" class="form-control">
                        <option value="0" {{ $mitra->is_active == 0 ? 'selected' : '' }}>Tidak Terverifikasi</option>
                        <option value="1" {{ $mitra->is_active == 1 ? 'selected' : '' }}>Terverifikasi</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="#name">Nama (Akun)</label>
                    <input name="name" disabled id="name" class="form-control" style="resize: none"
                        value="{{ $user->name }}">
                </div>
                <div class="form-group">
                    <label for="#phone">No. Handphone (Akun)</label>
                    <input name="phone" disabled id="phone" class="form-control" style="resize: none"
                        value="{{ $user->phone }}">
                </div>
                <div class="form-group">
                    <label for="#email">Email (Akun)</label>
                    <input name="email" disabled id="email" class="form-control" style="resize: none"
                        value="{{ $user->email }}">
                </div>
                <div class="form-group">
                    <label for="#name">Nama (Mitra)</label>
                    <input name="name" disabled id="name" class="form-control" style="resize: none"
                        value="{{ $mitra->name }}">
                </div>
                <div class="form-group">
                    <label for="#ref">Referral Code</label>
                    <input name="text" disabled id="ref" class="form-control" disabled style="resize: none"
                        value="{{ $mitra->referral_code }}">
                </div>
                <div id="section-bank-account" class="mt-2">
                    <h6>Informasi Bank</h6>
                    <hr>
                    <div class="form-group row">
                        <label for="bank" class="col-form-label col-sm-3">Nama Bank</label>
                        <div class="col-sm-9">
                            <select name="bank" id="bank" class="form-control select2 mb-2" style="width: 100%">
                                <option value=""></option>
                                @foreach (getBankProvider() as $b)
                                    <option value="{{ $b }}" {{ $b == $mitra->bank ? 'selected' : '' }}>
                                        {{ $b }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="account_name" class="col-form-label col-sm-3">Atas Nama</label>
                        <div class="col-sm-9">
                            <input type="text" name="account_name" id="account_name" class="form-control" placeholder=""
                                value="{{ $mitra->account_name }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="account_name" class="col-form-label col-sm-3">Nomor Rekening</label>
                        <div class="col-sm-9">
                            <input type="number" name="account_number" id="account_number" class="form-control"
                                placeholder="" value="{{ $mitra->account_number }}">
                        </div>
                    </div>
                </div>
                <div id="section-address" class="mt-2">
                    <h6>Lokasi</h6>
                    <hr>
                    <div class="form-group row">
                        <label for="address" class="col-form-label col-sm-3">Alamat</label>
                        <div class="col-sm-9">
                            <textarea name="address" class="form-control" id="address" placeholder="" cols="30" rows="2">{{ $mitra->address }}</textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="province" class="col-form-label col-sm-3">Provinsi</label>
                        <div class="col-sm-9">
                            <select type="text" id="province" name="province" onchange="getCity()"
                                style="width: 100%" class="form-control select2">
                                <option value="{{ $mitra->province }}">{{ $mitra->province }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="city" class="col-form-label col-sm-3">Kota</label>
                        <div class="col-sm-9">
                            <select type="text" id="city" name="city" onchange="getDistrict()"
                                style="width: 100%" class="form-control select2">
                                <option value="{{ $mitra->city }}">{{ $mitra->city }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="district" class="col-form-label col-sm-3">Kecamatan</label>
                        <div class="col-sm-9">
                            <select type="text" id="district" name="district" onchange="getVillage()"
                                style="width: 100%" class="form-control select2">
                                <option value="{{ $mitra->district }}">{{ $mitra->district }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="village" class="col-form-label col-sm-3">Kelurahan</label>
                        <div class="col-sm-9">
                            <select type="text" id="village" name="village" onchange="getPostalCode()"
                                style="width: 100%" class="form-control select2">
                                <option value="{{ $mitra->village }}">{{ $mitra->village }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="village" class="col-form-label col-sm-3">Kode Pos</label>
                        <div class="col-sm-9">
                            <input type="text" name="postalcode" id="postalcode" class="form-control" placeholder=""
                                value="{{ $mitra->postalcode }}">
                        </div>
                    </div>
                </div>
                <div>
                    <button class="float-right btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
        <div id="tab3" class="tab-pane fade">
            @if (isset($upline_referral_list) && !$upline_referral_list->isEmpty())
                @foreach ($upline_referral_list as $i)
                    <div class="border p-3 mb-2 d-flex justify-content-between">
                        <div>
                            {{ $i['name'] }} ({{ $i['mitra_uid'] }})
                        </div>
                        <div>
                            <a href="{{ route('admin.old.user.mitra', $i['user_id']) }}" class="btn btn-link">Lihat</a>
                        </div>
                    </div>
                @endforeach
                <div class="text-bold mb-2">Upline Referral ({{ count($upline_referral_list) }})</div>
            @endif
            @if ($mitra)
                <div class="border border-primary p-3 mb-2 d-flex justify-content-between">
                    <div>
                        {{ $mitra['name'] }} ({{ $mitra['mitra_uid'] }})
                    </div>
                    <div>
                        <a href="{{ route('admin.old.user.mitra', $mitra['id']) }}" class="btn btn-link">Lihat</a>
                    </div>
                </div>
            @endif
            <div class="text-bold mb-2">Downline Referral ({{ count($referral_list) }})</div>
            @if ($referral_list)
                @foreach ($referral_list as $i)
                    <div class="border p-3 mb-2 {{ $i['level'] == 'A' ? '' : 'ml-3' }} d-flex justify-content-between">
                        <div>
                            {{ $i['name'] }} ({{ $i['mitra_uid'] }}) {{ $i['level'] }}
                        </div>
                        <div>
                            <a href="{{ route('admin.old.user.mitra', $i['user_id']) }}" class="btn btn-link">Lihat</a>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
        <div id="tab4" class="tab-pane fade">
        </div>
    </div>
@endsection


@push('stack-head')
    <link rel="stylesheet" href="{{ asset('assets/plugins/chart.js/Chart.min.css') }}">
@endpush
{{--
@section('javascript')
    <script src="{{ asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
    <script>
        $(document).ready(() => {
            initPostalCode()
            const data = [{
                    year: 2010,
                    count: 10
                },
                {
                    year: 2011,
                    count: 20
                },
                {
                    year: 2012,
                    count: 15
                },
                {
                    year: 2013,
                    count: 25
                },
                {
                    year: 2014,
                    count: 22
                },
                {
                    year: 2015,
                    count: 30
                },
                {
                    year: 2016,
                    count: 28
                },
            ];

            new Chart(
                document.getElementById('performanceChart'), {
                    type: 'line',
                    data: {
                        labels: data.map(row => row.year),
                        datasets: [{
                            label: 'Transaksi',
                            data: data.map(row => row.count)
                        }]
                    }
                }
            );
        })
    </script>
@endsection --}}