@extends('layouts.dashboard')
@section('content')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Profile</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Contacts</a></li>
                                <li class="breadcrumb-item active">Profile</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-xl-4">
                    <div class="card overflow-hidden">
                        <div class="bg-primary bg-soft">
                            <div class="row">
                                <div class="col-7">
                                    <div class="text-primary p-3">
                                        <h5 class="text-primary">Welcome Back !</h5>
                                        <p>It will seem like simplified</p>
                                    </div>
                                </div>
                                <div class="col-5 align-self-end">
                                    <img src="{{asset('assets/images/profile-img.png')}}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="avatar-md profile-user-wid mb-4">
                                        <img src="https://ui-avatars.com/api/?name={{$user->name}}" alt="" class="img-thumbnail rounded-circle">
                                    </div>
                                    <h5 class="font-size-15 text-truncate">{{$user->name}}</h5>
                                    <p class="text-muted mb-0 text-truncate">{{$user->unit}}</p>
                                </div>

                                <div class="col-sm-8">
                                    <div class="pt-4">
                                       
                                        <div class="row">
                                            <div class="col-6">
                                                <h5 class="font-size-15">125</h5>
                                                <p class="text-muted mb-0">Projects</p>
                                            </div>
                                            <div class="col-6">
                                                <h5 class="font-size-15">$1245</h5>
                                                <p class="text-muted mb-0">Revenue</p>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Personal Information</h4>

                             <div class="table-responsive">
                                <table class="table table-nowrap mb-0">
                                    <tbody>
                                        <tr>
                                            <th scope="row">Nama :</th>
                                            <td>{{$user->name}}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">NIK :</th>
                                            <td>{{$user->nik}}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">E-mail :</th>
                                            <td>{{$user->email}}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Alamat :</th>
                                            <td>{{$user->alamat}}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">No.Telp :</th>
                                            <td>{{$user->hp}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->

                    {{-- <div class="card">
                        <div class="card-body">

                            <h4 class="card-title">Action</h4>
                             <hr>

                            <div class="d-grid gap-2">
                                <a href="" class="btn btn-primary btn-lg waves-effect waves-light">Buat Pinjaman Baru</a>
                             </div>
                        </div>
                    </div> --}}
                    <!-- end card -->

             
                </div>         
                
                <div class="col-xl-8">

                    <div class="row">
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <p class="text-muted fw-medium mb-2">Total Pinjaman</p>
                                            <h4 class="mb-0">125</h4>
                                        </div>

                                        <div class="flex-shrink-0 align-self-center">
                                            <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                                <span class="avatar-title">
                                                    <i class="bx bx-check-circle font-size-24"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <p class="text-muted fw-medium mb-2">Pending Projects</p>
                                            <h4 class="mb-0">12</h4>
                                        </div>

                                        <div class="flex-shrink-0 align-self-center">
                                            <div class="avatar-sm mini-stat-icon rounded-circle bg-primary">
                                                <span class="avatar-title">
                                                    <i class="bx bx-hourglass font-size-24"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <p class="text-muted fw-medium mb-2">Total Revenue</p>
                                            <h4 class="mb-0">$36,524</h4>
                                        </div>

                                        <div class="flex-shrink-0 align-self-center">
                                            <div class="avatar-sm mini-stat-icon rounded-circle bg-primary">
                                                <span class="avatar-title">
                                                    <i class="bx bx-package font-size-24"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Riwayat Pinjaman</h4>
                            <div class="table-responsive">
                                <table id="datatable" class="table table-nowrap table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Pokok</th>
                                            <th scope="col">Jangka Waktu</th>
                                            
                                            <th scope="col">Tgl Realisasi</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                        @foreach ($pinjaman as $item)
                                        <tr>
                                            <th scope="row">#{{$item->debiturID}}</th>
                                            <td>{{rupiah($item->pokokPinjaman)}}</td>
                                            <td>{{$item->jangkaWaktu}} bulan</td>
                                            
                                            <td>{{normaldate($item->tglRealisasi)}}</td>
                                            <td>
                                                <h5>
                                                    @if ($item->status == 'Active')
                                                    <span class="badge bg-success ms-1 align-bottom">Aktif</span>

                                                    @else
                                                    <span class="badge bg-primary ms-1 align-bottom">Selesai</span>

                                                    @endif
                                                </h5>
                                            </td>
                                            <td>
                                                <a href="{{route('dashboard.anggota.detail.pinjaman',$item->debiturID)}}" class="btn btn-primary waves-effect btn-label btn-sm waves-light "><i class="bx bx-show label-icon"></i>Lihat</a>
                                            </td>
                                        </tr>
                                        @endforeach
                                      

                                         
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->

        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->

    
   
</div>
@endsection

@push('AddJS')
<script src="{{asset('')}}assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="{{asset('')}}assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script>
    $('#datatable').DataTable();
</script>
@endpush
@push('AddCSS')
<link href="{{asset('')}}assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="{{asset('')}}assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
@endpush