@extends('layouts.main')
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Profile</h1>
            </div>
            <div class="card-body profile-card py-2 d-flex flex-column align-items-center text-center"
                style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; background: linear-gradient(45deg, #f3f3f3, #e0e0e0);">

                <i class="bi bi-arrow-right" style="position: absolute; top: 10px; right: 10px; font-size: 24px;"></i>
                <img src="{{ Auth::user()->foto_profile == null ? asset('assets/img/avatar/avatar-1.png') : asset('storage/foto-profile/' . Auth::user()->foto_profile) }}"
                    alt="{{ Auth::user()->nama_depan }}" class="rounded-circle" style="width: 150px; height: 150px;">
                <h2 class="mt-3">{{ Auth::user()->nama_depan . ' ' . Auth::user()->nama_belakang }}</h2>
                <h5 class="mb-0">#{{ Auth::user()->id }}</h5>
            </div>

            <div class="card">
                <div class="card-body pt-3">
                    <!-- Bordered Tabs -->
                    <ul class="nav nav-tabs nav-tabs-bordered">

                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Data
                                Diri</button>
                        </li>

                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Ubah
                                Profile</button>
                        </li>

                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Ubah
                                Password</button>
                        </li>

                    </ul>

                    <div class="tab-content pt-2">

                        {{-- Detail Profil --}}
                        <div class="tab-pane active show profile-overview" id="profile-overview">

                            <h5 class="card-title">Detail Profil</h5>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label ">Nama Lengkap</div>
                                <div class="col-lg-9 col-md-8">
                                    {{ Auth::user()->nama_depan . ' ' . Auth::user()->nama_belakang }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Email</div>
                                <div class="col-lg-9 col-md-8">{{ Auth::user()->email }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">No. HP</div>
                                <div class="col-lg-9 col-md-8">{{ Auth::user()->nohp }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Negara</div>
                                <div class="col-lg-9 col-md-8">Indonesia</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Provinsi</div>
                                <div class="col-lg-9 col-md-8">{{ Auth::user()->getProvinceName() }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Kota/Kabupaten</div>
                                <div class="col-lg-9 col-md-8">{{ Auth::user()->getCityName() }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Kecamatan</div>
                                <div class="col-lg-9 col-md-8">{{ Auth::user()->getDistrictName() }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Kelurahan</div>
                                <div class="col-lg-9 col-md-8">{{ Auth::user()->getVillageName() }}</div>
                            </div>


                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Alamat</div>
                                <div class="col-lg-9 col-md-8">{{ Auth::user()->alamat }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Nama Bank/e-Wallet Tujuan</div>
                                <div class="col-lg-9 col-md-8">Dana</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 label">Nomor Rekening/e-Wallet Tujuan</div>
                                <div class="col-lg-9 col-md-8">088376473</div>
                            </div>

                        </div>

                        {{-- Edit Profile --}}
                        <div class="tab-pane fade profile-edit pt-3" id="profile-edit">
                            <form id="formEditProfile" action="javascript:void(0);" enctype="multipart/form-data">
                                @csrf
                                <div class="row mb-3">
                                    <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Foto Profil</label>
                                    <div class="col-md-8 col-lg-9">
                                        <img id="profileImagePreview"
                                            src="{{ Auth::user()->foto_profile == null ? asset('assets/img/avatar/avatar-1.png') : asset('storage/foto-profile/' . auth()->user()->foto_profile) }}"
                                            alt="Profile" style="max-width: 100%; max-height: 150px;">
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <label for="profileImageInput" class="btn btn-primary btn-sm"
                                                title="Upload new profile image">
                                                <i class="bi bi-upload"></i> Unggah
                                                <input type="file" id="profileImageInput" accept="image/*"
                                                    style="display: none;" name="foto_profile">
                                            </label>
                                        </div>

                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="nama_depan" class="col-md-4 col-lg-3 col-form-label">Nama
                                        Lengkap</label>
                                    <div class="col-md-4 col-lg-4">
                                        <input name="nama_depan" type="text" class="form-control" id="nama_depan"
                                            placeholder="Nama depan" value="{{ Auth::user()->nama_depan }}" required>
                                    </div>
                                    <div class="col-md-4 col-lg-5">
                                        <input name="nama_belakang" type="text" class="form-control"
                                            id="nama_belakang" placeholder="Nama belakang"
                                            value="{{ Auth::user()->nama_belakang }}" required>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="nohp" class="col-md-4 col-lg-3 col-form-label">No. HP</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="nohp" type="text" class="form-control" id="nohp"
                                            value="{{ Auth::user()->nohp }}"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                            required>
                                    </div>
                                </div>


                                <div class="row mb-3">
                                    <label for="selectProvince" class="col-md-4 col-lg-3 col-form-label">Provinsi</label>
                                    <div class="col-md-8 col-lg-9">
                                        <select style="width: 100%;" name="provinsi" id="selectProvince">
                                            @foreach ($provinces as $province)
                                                <option value="{{ $province->code }}">{{ $province->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="selectCity"
                                        class="col-md-4 col-lg-3 col-form-label">Kabupaten/Kota</label>
                                    <div class="col-md-8 col-lg-9">
                                        <select style="width: 100%;" name="kota" id="selectCity">
                                            @foreach ($cities as $city)
                                                <option value="{{ $city->code }}">{{ $city->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="selectDistrict" class="col-md-4 col-lg-3 col-form-label">Kecamatan</label>
                                    <div class="col-md-8 col-lg-9">
                                        <select style="width: 100%;" name="kecamatan" id="selectDistrict">
                                            @foreach ($districts as $district)
                                                <option value="{{ $district->code }}">{{ $district->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="selectVillage" class="col-md-4 col-lg-3 col-form-label">Kelurahan</label>
                                    <div class="col-md-8 col-lg-9">
                                        <select style="width: 100%;" name="kelurahan" id="selectVillage" required>
                                            @foreach ($villages as $village)
                                                <option value="{{ $village->code }}">{{ $village->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="alamat" class="col-md-4 col-lg-3 col-form-label">Alamat</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="alamat" type="text" class="form-control" id="alamat"
                                            value="{{ Auth::user()->alamat }}" required>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="namaBank" class="col-md-4 col-lg-3 col-form-label">Bank/e-Wallet
                                        Tujuan</label>
                                    <div class="col-md-4 col-lg-4">
                                        <select style="width: 100%;" name="nama_bank" id="namaBank" required>
                                            <option selected disabled>Silahkan Pilih Bank/e-Wallet</option>
                                            <option disabled>Bank</option>
                                            <option value="bca"
                                                {{ Auth::user()->nama_bank == 'bca' ? 'selected' : '' }}>BCA
                                            </option>
                                            <option value="mandiri"
                                                {{ Auth::user()->nama_bank == 'mandiri' ? 'selected' : '' }}>
                                                Mandiri
                                            </option>
                                            <option value="bni"
                                                {{ Auth::user()->nama_bank == 'bni' ? 'selected' : '' }}>BNI
                                            </option>
                                            <option value="bri"
                                                {{ Auth::user()->nama_bank == 'bri' ? 'selected' : '' }}>BRI
                                            </option>
                                            <option value="bsm"
                                                {{ Auth::user()->nama_bank == 'bsm' ? 'selected' : '' }}>BSI (Bank
                                                Syariah
                                                Indonesia)</option>
                                            <option value="danamon"
                                                {{ Auth::user()->nama_bank == 'danamon' ? 'selected' : '' }}>
                                                Danamoon/Danamon Syariah</option>
                                            <option value="permata"
                                                {{ Auth::user()->nama_bank == 'permata' ? 'selected' : '' }}>Bank
                                                Permata
                                            </option>
                                            <option value="mega"
                                                {{ Auth::user()->nama_bank == 'mega' ? 'selected' : '' }}>Bank Mega
                                            </option>
                                            <option value="btn"
                                                {{ Auth::user()->nama_bank == 'btn' ? 'selected' : '' }}>BTN/BTN
                                                Syariah
                                            </option>
                                            <option value="cimb"
                                                {{ Auth::user()->nama_bank == 'cimb' ? 'selected' : '' }}>CIMB
                                                Niaga/CIMB
                                                Niaga Syariah</option>
                                            <option value="hsbc"
                                                {{ Auth::user()->nama_bank == 'hsbc' ? 'selected' : '' }}>HSBC
                                                Indonesia
                                            </option>
                                            <option value="uob"
                                                {{ Auth::user()->nama_bank == 'uob' ? 'selected' : '' }}>TMRW/UOB
                                            </option>
                                            <option value="panin"
                                                {{ Auth::user()->nama_bank == 'panin' ? 'selected' : '' }}>Panin
                                                Bank
                                            </option>
                                            <option value="bii"
                                                {{ Auth::user()->nama_bank == 'bii' ? 'selected' : '' }}>Maybank
                                                Indonesia
                                            </option>
                                            <option value="ocbc"
                                                {{ Auth::user()->nama_bank == 'ocbc' ? 'selected' : '' }}>OCBC NISP
                                            </option>
                                            <option value="sinarmas"
                                                {{ Auth::user()->nama_bank == 'sinarmas' ? 'selected' : '' }}>Bank
                                                Sinarmas
                                            </option>
                                            <option value="dbs"
                                                {{ Auth::user()->nama_bank == 'dbs' ? 'selected' : '' }}>DBS Bank
                                                Indonesia
                                            </option>
                                            <option disabled>e-Wallet</option>
                                            <option value="ovo"
                                                {{ Auth::user()->nama_bank == 'ovo' ? 'selected' : '' }}>OVO
                                            </option>
                                            <option value="dana"
                                                {{ Auth::user()->nama_bank == 'dana' ? 'selected' : '' }}>DANA
                                            </option>
                                            <option value="linkaja"
                                                {{ Auth::user()->nama_bank == 'linkaja' ? 'selected' : '' }}>
                                                LinkAja
                                            </option>
                                            <option value="gopay"
                                                {{ Auth::user()->nama_bank == 'gopay' ? 'selected' : '' }}>GoPay
                                            </option>
                                            <option value="shopeepay"
                                                {{ Auth::user()->nama_bank == 'shopeepay' ? 'selected' : '' }}>
                                                ShopeePay
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 col-lg-5">
                                        <input name="no_rek" type="text" class="form-control" id="noRek"
                                            value="{{ Auth::user()->no_rek }}"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                            required>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                </div>
                            </form>
                        </div>
                        {{-- Edit Profil --}}

                        {{-- Change Password --}}
                        <div class="tab-pane fade pt-3" id="profile-change-password">
                            <form id="formChangePassword" action="javascript:void(0);">
                                @csrf
                                <div class="row mb-3">
                                    <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Password
                                        Sekarang</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="currentpassword" type="password" class="form-control"
                                            id="currentPassword">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">Password
                                        Baru</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="newpassword" type="password" class="form-control" id="newPassword">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Ketik Ulang
                                        Password Baru</label>
                                    <div class="col-md-8 col-lg-9">
                                        <input name="renewpassword" type="password" class="form-control"
                                            id="renewPassword">
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">Ganti Password</button>
                                </div>
                            </form>
                        </div>

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

    {{-- profile --}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const editProfileTab = document.querySelector('[data-bs-target="#profile-edit"]');
            const changePasswordTab = document.querySelector('[data-bs-target="#profile-change-password"]');
            const overviewTab = document.querySelector('[data-bs-target="#profile-overview"]');

            // Menambahkan event listener untuk mengubah tab saat tombol diklik
            editProfileTab.addEventListener("click", function() {
                activateTabAndContent(editProfileTab, "#profile-edit");
            });

            changePasswordTab.addEventListener("click", function() {
                activateTabAndContent(changePasswordTab, "#profile-change-password");
            });

            // Menambahkan event listener untuk kembali ke tab "Overview"
            overviewTab.addEventListener("click", function() {
                activateTabAndContent(overviewTab, "#profile-overview");
            });

            // Fungsi untuk mengaktifkan tab dan konten
            function activateTabAndContent(tabButton, tabContentId) {
                // Nonaktifkan tab aktif saat ini
                const activeTabButton = document.querySelector(".nav-link.active");
                const activeTabContent = document.querySelector(".tab-pane.active");

                activeTabButton.classList.remove("active");
                activeTabContent.classList.remove("show", "active");

                // Aktifkan tab yang dipilih
                tabButton.classList.add("active");

                // Tampilkan konten tab yang dipilih
                const selectedTabContent = document.querySelector(tabContentId);
                selectedTabContent.classList.add("show", "active");
            }
        });

        $(document).ready(function() {

            var selectedVillage = "{{ Auth::user()->kode_kelurahan }}";
            var selectedDistrict = "{{ Auth::user()->village->district->code }}";
            var selectedCity = "{{ Auth::user()->village->district->city->code }}";
            var selectedProvince = "{{ Auth::user()->village->district->city->province->code }}";

            $("#selectProvince").val(selectedProvince).trigger('change');
            $("#selectCity").val(selectedCity).trigger('change');
            $("#selectDistrict").val(selectedDistrict).trigger('change');
            $("#selectVillage").val(selectedVillage).trigger('change');

            function ucwords(str) {
                return str.toLowerCase().replace(/\b\w/g, function(l) {
                    return l.toUpperCase();
                });
            }

            $('#selectProvince').select2();

            $('#selectCity').select2();

            $('#selectDistrict').select2();

            $('#selectVillage').select2();

            // Event Listener untuk selectProvince
            $("#selectProvince").change(function() {
                let code = $("#selectProvince").val();

                // Mengosongkan pilihan di selectCity dan selectDistrict dan selectVillage
                $("#selectCity", "#selectDistrict", "#selectVillage").empty();

                // Menghapus properti 'disabled' pada selectCity dan selectDistrict dan selectVillage
                $("#selectCity", "#selectDistrict", "#selectVillage").prop(
                    "disable",
                    false
                );

                // Muat ulang data berdasarkan provinsi yang baru dipilih di selectProvince
                $("#selectCity").select2({
                    placeholder: "Pilih Kabupaten/Kota",
                    ajax: {
                        url: "/cari-kota/" + code,
                        processResults: function({
                            data
                        }) {
                            return {
                                results: $.map(data, function(item) {
                                    return {
                                        id: item.code,
                                        text: ucwords(item.name),
                                    };
                                }),
                            };
                        },
                    },
                });
            });

            // Event Listener untuk perubahan pada selectCity
            $("#selectCity").change(function() {
                let code = $("#selectCity").val();

                // Mengosongkan pilihan di selectDistrict dan selectVillage
                $("#selectDristrict", "#selectVillage").empty();

                // Menghapus properti 'disable' pada selectDistrict dan selectVillage
                $("#selectDistrict", "#selectVillage").prop("disabled", false);

                // Memuat ulang data berdasarkan wilayah yang baru dipilih di selectCity
                $("#selectDistrict").select2({
                    placeholder: "Pilih Kecamatan",
                    ajax: {
                        url: "/cari-kecamatan/" + code, // Isi dengan URL yang sesuai
                        processResults: function({
                            data
                        }) {
                            return {
                                results: $.map(data, function(item) {
                                    return {
                                        id: item.code,
                                        text: ucwords(item.name),
                                    };
                                }),
                            };
                        },
                    },
                });
            });

            // Event Listener untuk selectDistrict
            $("#selectDistrict").change(function() {
                let code = $("#selectDistrict").val();

                // Mengosongkan pilihan di selectVillage
                $("#selectVillage").empty();

                // Menghapus properti 'disabled' pada selectVillage
                $("#selectVillage").prop("disabled", false);

                // Memuat ulang data berdasarkan wilayah yang baru dipilih di selectDistrict
                $("#selectVillage").select2({
                    placeholder: "Pilih Kelurahan",
                    ajax: {
                        url: "/cari-kelurahan/" + code, // Isi dengan URL yang sesuai
                        processResults: function({
                            data
                        }) {
                            return {
                                results: $.map(data, function(item) {
                                    return {
                                        id: item.code,
                                        text: ucwords(item.name),
                                    };
                                }),
                            };
                        },
                    },
                });
            });

            $('#namaBank').select2();

            //file input
            $('#profileImageInput').change(function() {
                var file = this.files[0];
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        // Mengganti src gambar dengan data URL dari berkas yang dipilih
                        document.getElementById('profileImagePreview').src = e.target.result;
                    };

                    // Membaca berkas sebagai data URL
                    reader.readAsDataURL(file);
                } else {
                    Swal.fire({
                        title: 'Salah Input',
                        text: 'File yang anda upload bukan foto/gambar',
                        icon: 'error',
                    });
                    $('#profileImageInput').val('');
                }
            });

            // edit profile
            $('#formEditProfile').on('submit', function(e) {
                e.preventDefault();

                let form = this;
                const csrf = $('meta[name="csrf-token"]').attr('content');

                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                let formData = new FormData(this);
                formData.append('foto', $('#profileImageInput')[0].files[0])

                Swal.fire({
                    html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/etwtznjn.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon><div class="mt-4 pt-2 fs-15"><h4>Form Anda sedang diproses!</h4><p class="text-muted mx-4 mb-0">Mohon tunggu...</p></div></div>',
                    allowEscapeKey: false,
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                });

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                    }
                });

                $.ajax({
                    type: 'POST',
                    url: "{{ route('profile.update') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire({
                            title: response.status ? 'Berhasil!' : 'Gagal!',
                            text: response.message,
                            icon: response.status ? 'success' : 'error',
                            confirmButtonText: 'OK',
                            position: 'center',
                        }).then(function() {
                            if (response.status) {
                                location.reload();
                            }
                        });
                    },
                    error: function(error) {
                        console.log(error.responseText)

                        var response = JSON.parse(error.responseText);

                        var errorMessage = '';

                        for (var key in response.errors) {
                            if (response.errors.hasOwnProperty(key)) {
                                errorMessage += response.errors[key][0] + '<br>';
                            }
                        }
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            html: errorMessage,
                            showConfirmButton: true
                        });
                    }
                });
            });

            // ganti password
            $('#formChangePassword').on('submit', function(e) {
                e.preventDefault();

                let form = this;

                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                let formData = new FormData(this);

                Swal.fire({
                    html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/etwtznjn.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon><div class="mt-4 pt-2 fs-15"><h4>Form Anda sedang diproses!</h4><p class="text-muted mx-4 mb-0">Mohon tunggu...</p></div></div>',
                    allowEscapeKey: false,
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                });


                const currentPassword = $('#currentPassword').val();
                const newPassword = $('#newPassword').val();
                const renewPassword = $('#renewPassword').val();

                $.ajax({
                    type: 'PUT',
                    url: "{{ route('profile.change-password') }}",
                    data: {
                        currentPassword: currentPassword,
                        newPassword: newPassword,
                        renewPassword: renewPassword,
                        "_token": "{{ csrf_token() }}",
                    },
                    success: function(response) {
                        Swal.fire({
                            title: response.status ? 'Berhasil!' : 'Gagal!',
                            text: response.message,
                            icon: response.status ? 'success' : 'error',
                            confirmButtonText: 'OK',
                            position: 'center',
                        }).then(function() {
                            if (response.status) {
                                location.reload();
                            }
                        });
                    },
                    error: function(error) {
                        console.log(error.responseText)

                        var response = JSON.parse(error.responseText);

                        var errorMessage = '';

                        for (var key in response.errors) {
                            if (response.errors.hasOwnProperty(key)) {
                                errorMessage += response.errors[key][0] + '<br>';
                            }
                        }
                        Swal.fire({
                            position: 'center',
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            html: errorMessage,
                            showConfirmButton: true
                        });
                    }
                });
            });
        });
    </script>
    {{-- profile --}}
@endsection