@extends('layouts.admin')

@section('main-content')
    <h1 class="h3 mb-4 text-gray-800">{{ __('Maklumat Ahli') }}</h1>

    <div class="row">
        {{-- Profile Sidebar (Left on Desktop, Top on Mobile) --}}
        <div class="col-lg-4 order-lg-2 mb-4">
            <div class="card shadow mb-4 text-center">
                <div class="card-profile-image mt-4">
                    <figure class="rounded-circle avatar font-weight-bold mx-auto"
                        style="font-size: 60px; height: 180px; width: 180px; display: flex; align-items: center; justify-content: center; background-color: #eaecf4; color: #4e73df;"
                        data-initial="{{ strtoupper($user->name[0]) }}">
                        {{ strtoupper($user->name[0]) }}
                    </figure>
                </div>
                <div class="card-body">
                    <h5 class="font-weight-bold mb-1">{{ $user->fullName }}</h5>
                    <a href="{{ route('tnc.show', $user->id) }}" target="_blank">
                        <span class="badge bg-{{ $styling['color'] }} rounded-pill {{ $styling['text_color'] }} px-3 py-2" style="font-size: 12px" data-bs-toggle="tooltip" title="{{ $styling['label'] }}">
                            {{ $styling['label'] }}
                        </span>
                    </a>
                </div>
            </div>

            <div class="card border-left-primary shadow mb-4">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Jumlah Plan</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalPlan }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-left-success shadow mb-4">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Jumlah Modal</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalInvest }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fa-solid fa-money-bills fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-left-warning shadow mb-4">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Jumlah Imbuhan</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalRoi }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fa-solid fa-money-bills fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-left-info shadow mb-4">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Jumlah Bayaran Diterima</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalPaymentMade }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fa-solid fa-file fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Profile Form (Right on Desktop, Bottom on Mobile) --}}
        <div class="col-lg-8 order-lg-1 mb-4">
            <div class="card shadow mb-4 h-100">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Maklumat Ahli') }}</h6>
                </div>

                <div class="card-body">

                    <h6 class="heading-small text-muted mb-4">{{ __('Info Pelanggan') }}</h6>

                    <div class="pl-lg-4">
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="form-control-label font-weight-bold">Nama Penuh</label>
                                <input type="text" class="form-control" value="{{ $user->name }}" readonly>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="form-control-label font-weight-bold">Nombor Telefon</label>
                                <input type="text" class="form-control" value="{{ $user->phone_no }}" readonly>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label class="form-control-label font-weight-bold">Alamat</label>
                                <textarea class="form-control" rows="2" readonly>{{ $user->address }}</textarea>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="form-control-label font-weight-bold">Alamat E-mel</label>
                                <input type="email" class="form-control" value="{{ $user->email }}" readonly>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="form-control-label font-weight-bold">Nombor Kad Pengenalan</label>
                                <input type="text" class="form-control" value="{{ $user->ic_no }}" readonly>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h6 class="heading-small text-muted mb-4">Maklumat Akaun Bank (Utama)</h6>

                    <div class="pl-lg-4">
                        <div class="row">
                            <div class="col-lg-12 mb-3">
                                <label class="form-control-label font-weight-bold">Nama Pada Akaun Bank</label>
                                <input type="text" class="form-control" value="{{ $user->name_on_bank }}" readonly>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="form-control-label font-weight-bold">Nama Bank</label>
                                <input type="text" class="form-control" value="{{ $user->bank_name }}" readonly>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="form-control-label font-weight-bold">Nombor Akaun Bank</label>
                                <input type="text" class="form-control" value="{{ $user->bank_account_no }}" readonly>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h6 class="heading-small text-muted mb-4">Maklumat Bank (KP)</h6>

                    <div class="pl-lg-4">
                        @if($user->bankAccounts && $user->bankAccounts->count() > 0)
                            <div class="row">
                                @foreach ($user->bankAccounts as $bankAccount)
                                    <div class="col-lg-6 mb-4">
                                        <div class="p-3 bg-light border rounded shadow-sm h-100">
                                            <h6 class="font-weight-bold text-primary mb-3 pb-2 border-bottom">
                                                <i class="fas fa-user-tie mr-2"></i> {{ $bankAccount->kp->name ?? 'KP Tidak Diketahui' }}
                                            </h6>
                                            <div class="mb-3">
                                                <label class="form-control-label text-dark font-weight-bold">Nama Bank</label>
                                                <input type="text" class="form-control bg-white" value="{{ $bankAccount->name }}" readonly>
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-control-label text-dark font-weight-bold">Nombor Akaun</label>
                                                <input type="text" class="form-control bg-white" value="{{ $bankAccount->account_no }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="alert alert-secondary">
                                <i class="fas fa-info-circle mr-2"></i> Tiada rekod bank KP dijumpai.
                            </div>
                        @endif
                    </div>

                    <hr class="my-4">

                    <h6 class="heading-small text-muted mb-4">Maklumat Pewaris</h6>

                    <div class="pl-lg-4">
                        <div class="row kin-item">
                            <div class="col-lg-4 mb-3">
                                <label class="font-weight-bold">Nama</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_name }}" readonly>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label class="font-weight-bold">Nombor Telefon</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_phone_no }}" readonly>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label class="font-weight-bold">Hubungan</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_relationship }}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 mb-3">
                                <label class="font-weight-bold">Nombor Kad Pengenalan</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_ic_no }}" readonly>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label class="font-weight-bold">Alamat E-mel</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_email }}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 mb-3">
                                <label class="font-weight-bold">Nama Pada Akaun Bank</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_name_on_bank }}" readonly>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label class="font-weight-bold">Nombor Akaun Bank</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_bank_account_no }}" readonly>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label class="font-weight-bold">Nama Bank</label>
                                <input type="text" class="form-control bg-white" value="{{ $user->nok_bank_name }}" readonly>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center flex-wrap">
                    <ul class="nav nav-pills card-header-pills mb-2 mb-md-0" id="kp-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" data-id="">Semua (All)</a>
                        </li>
                        @foreach ($kpList as $kpID => $kpName)
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-id="{{ $kpID }}">{{ $kpName }}</a>
                            </li>
                        @endforeach
                    </ul>
                    <h6 class="m-0 font-weight-bold text-primary">Senarai Plan</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered dataTable w-100" id="plans-table">
                            <thead class="bg-light">
                                <tr>
                                    <th>Plan</th>
                                    <th>KP</th>
                                    <th>Modal</th>
                                    <th>PO Bonda</th>
                                    <th>PO KP</th>
                                    <th>Tindakan (Actions)</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
    <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />

    <script>
        let table;

        $(function() {
            let currentID = ''; // Default: Pending

            table = $('#plans-table').DataTable({
                paging: false,
                scrollX: true,
                autoWidth: false,
                language: {
                    url: '{{ asset('storage/datatable/ms.json') }}',
                },
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! route('plan.user.details') !!}',
                    data: function (d) {
                        d.kp = currentID;
                        d.userID = {{ $userId }};
                        d.key = "cce764c0-bd08-4313-a6a8-16ed0bb80358";
                    }
                },
                columns: [
                    { data: 'name', name: 'name' },
                    { data: 'kp_name', name: 'kp_name' },
                    { data: 'total_modal', name: 'total_modal' },
                    { data: 'total_po_bonda', name: 'total_po_bonda' },
                    { data: 'total_po_kp', name: 'total_po_kp' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });

            $('#kp-tabs a').on('click', function (e) {
                e.preventDefault();
                $('#kp-tabs a').removeClass('active');
                $(this).addClass('active');

                currentID = $(this).data('id') ?? '';
                table.ajax.reload();
            });

            $('#refreshTable').on('click', function () {
                table.ajax.reload(null, false);
                $(this).find('i').addClass('fa-spin');
                setTimeout(() => $(this).find('i').removeClass('fa-spin'), 800); // small spin effect
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        });
    </script>
@endpush