@extends('pwa.template.app.main')

@section('script')
@if (session('failed-merchant'))
<script>
    Swal.fire({
        icon: 'info',
        title: 'Sedang Dalam Proses!',
        text: "{{ session('failed-merchant') }}",
    })

</script>
@endif
@endsection

@section('app-content')
<div class="container">
    <!-- Profile Wrapper-->
    <section class="profile-wrapper-area py-3">
        <!--<div class="mb-3">-->
        <!--  <a class="text-black" href="{{ route('home') }}">-->
        <!--    <i class="fa-solid fa-arrow-left me-1"></i> <span>Kembali Ke Halaman Beranda</span>-->
        <!--  </a>-->
        <!--</div>-->
        <!-- User Information-->
        <div class="card user-info-card">
            <div class="card-body p-4 d-flex align-items-center">
                <div class="user-profile me-3"><img src="{{ asset('storage/' . $user->foto) }}" alt=""
                        style="height: 100%; object-fit: cover;"></div>
                <div class="user-info">
                    <p class="mb-0 text-dark">{{ $user->no_ktp }}</p>
                    <h5 class="mb-0">{{ $user->nama }}</h5>
                </div>
            </div>
        </div>
        <!-- User Meta Data-->
        <div class="card user-data-card">
            <div class="card-body">
                <div class="single-profile-data d-flex align-items-center justify-content-between">
                    <div class="title d-flex align-items-center"><i class="fa-solid fa-at"></i><span>Username</span>
                    </div>
                    <div class="data-content">{{ $user->username }}</div>
                </div>
                <div class="single-profile-data d-flex align-items-center justify-content-between">
                    <div class="title d-flex align-items-center"><i class="fa-solid fa-user"></i><span>Nama
                            Lengkap</span></div>
                    <div class="data-content">{{ $user->nama }}</div>
                </div>
                <div class="single-profile-data d-flex align-items-center justify-content-between">
                    <div class="title d-flex align-items-center"><i class="fa-solid fa-phone"></i><span>Nomor
                            Telepon</span></div>
                    <div class="data-content">{{ $user->no_hp }}</div>
                </div>
                <div class="single-profile-data d-flex align-items-center justify-content-between">
                    <div class="title d-flex align-items-center"><i class="fa-solid fa-envelope"></i><span>Nomor
                            KTP</span></div>
                    <div class="data-content">{{ $user->no_ktp }}</div>
                </div>
                <div class="single-profile-data d-flex align-items-center justify-content-between">
                    <div class="title d-flex align-items-center"><i
                            class="fa-solid fa-location-dot"></i><span>Alamat</span></div>
                    <div class="data-content">{{ $user->alamat }}</div>
                </div>
                <!-- Edit Profile-->
                {{-- <div class="edit-profile-btn mt-3">
            <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#modal-edit"><i
                class="fa-solid fa-pen me-2"></i>Edit Profile
            </button>
          </div> --}}
            </div>
        </div>
    </section>

    <section class="pb-3">
        <div class="card">
            <div class="card-body d-flex justify-content-between align-items-end">

                <div class="left">

                    <p style="margin-bottom: 0">Saldo Bumdes</p>

                    <h1 style="margin-bottom: 0">Rp. {{ number_format(Auth::user()->saldo, 0, '.', '.') }}</h1>


                </div>

                <div class="right" style="display: flex; align-items: center;">
                    <a href="{{ route('topup') }}"  class="btn btn-primary me-2">
                        <i class="bi bi-plus-lg"></i>
                    </a>

                    <a href="{{route('transfer')}}" class="btn btn-primary">
                        <i class="bi bi-send"></i>
                    </a>

                </div>

            </div>
        </div>

    </section>

    {{-- riwayat transaksi --}}
    <section class="pb-5">
        <div class="card">
            <div class="card-body">
                <h5 class="px-2">Menu</h5>
                <ul class="list-group list-group-flush">
                    @if (isset(Auth::user()->merchant))
                    <li class="list-group-item px-2 py-3">
                        <a href="{{ route('merchant-profile', Auth::user()->merchant) }}" class="text-black">
                            <i class="me-2 bi bi-shop"></i>
                            Merchant Saya
                        </a>
                    </li>
                    @else
                    <li class="list-group-item px-2 py-3">
                        <a href="{{ route('buat-merchant') }}" class="text-black">
                            <i class="me-2 bi bi-shop"></i>
                            Buka Merchant
                        </a>
                    </li>
                    @endif
                    <li class="list-group-item px-2 py-3">
                        <a href="{{route('cashflow')}}" class="text-black">
                            <i class="me-2 bi bi-arrow-down-up"></i>
                            Cashflow Desa
                        </a>
                    </li>
                    <li class="list-group-item px-2 py-3">
                        <a href="{{route('transaksi')}}" class="text-black">
                            <i class="me-2 bi bi-arrow-down-up"></i>
                            Riwayat Transaksi
                        </a>
                    </li>
                    <li class="list-group-item px-2 py-3">
                        <a href="{{ route('perizinan') }}" class="text-black">
                            <i class="me-2 bi bi-file-earmark-text"></i>
                            Pengurusan Dokumen
                        </a>
                    </li>
                    <!--<li class="list-group-item px-2 py-3">-->
                    <!--  <a href="" class="text-black">-->
                    <!--    <i class="me-2 bi bi-megaphone"></i>-->
                    <!--    Laporan Saya-->
                    <!--  </a>-->
                    <!--</li>-->
                    <li class="list-group-item px-2 py-3">
                        <a href="" class="text-black">
                            <i class="me-2 bi bi-question-circle"></i>
                            Bantuan
                        </a>
                    </li>
                    <li class="list-group-item px-2 py-3">
                        <a href="{{ route('logout.action') }}" class="text-danger">
                            <i class="me-2 bi bi-box-arrow-left"></i>
                            Logout
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Edit Profile</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" id="form-edit" action="{{ route('profile.update', $user->no_ktp) }}">
                    @csrf
                    @method('put')
                    <div class="mb-3">
                        <label for="nama" class="form-label">Nama</label>
                        <input type="text" class="form-control" id="nama" name="nama">
                    </div>
                    <div class="mb-3">
                        <label for="alamat" class="form-label">Alamat</label>
                        <input type="text" class="form-control" id="alamat">
                    </div>
                    <div class="mb-3">
                        <label for="no_hp" class="form-label">No Hp</label>
                        <input type="number" class="form-control" id="no_hp">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" form="form-edit" class="btn btn-primary">Simpan</button>
            </div>
        </div>
    </div>
</div>
@endsection