@extends('layouts.app')
@push('styles')
    @include('_distributor.desktop.account.partials.css')
@endpush
@section('content')
    <div class="row">
        @include('_distributor.desktop.account.partials.sidebar')

        <div class="col-md-6">
            <div class="profile-main-content tab-content" id="bank-content">
                <h5 class="mb-4">Bank</h5>
                <div class="bank-info-alert">
                    Penarikan My Balance akan ditransfer ke Bank di bawah ini. Mohon pastikan data yang diinput sudah benar
                </div>
                <form>
                    <div class="mb-3">
                        <label for="namaPemilikRekeningDisplay" class="form-label">Nama pemilik rekening</label>
                        <input type="text" class="form-control" id="namaPemilikRekeningDisplay"
                            value="{{ $bankUser->account_name ?? '-' }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="bankDisplay" class="form-label">Bank</label>
                        <input type="text" class="form-control" id="bankDisplay"
                            value="{{ $bankUser->bank->bank_name ?? '-' }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="nomorRekeningDisplay" class="form-label">Nomor rekening</label>
                        <input type="text" class="form-control" id="nomorRekeningDisplay"
                            value="{{ $bankUser->account_number ?? '-' }}" readonly>
                    </div>
                    <p class="text-muted small">Lengkapi dan pastikan data bank sudah benar.</p>
                    <div class="d-flex justify-content-end mt-4">
                        <button type="button" class="btn btn-primary-custom" data-bs-toggle="modal"
                            data-bs-target="#bankDetailModal">Ubah Data Bank</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade modal-bank-detail" id="bankDetailModal" tabindex="-1" aria-labelledby="bankDetailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bankDetailModalLabel">Detail Bank</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info-custom mb-3" role="alert">
                        Untuk dapat melakukan penarikan Saldo, mohon isi detail Bankmu di bawah ini.
                    </div>
                    <form>
                        <div class="mb-3">
                            <label for="modalNamaPemilikRekening" class="form-label">Nama pemilik rekening</label>
                            <input type="text" class="form-control" id="modalNamaPemilikRekening"
                                value="{{ $bankUser->account_name ?? '' }}" placeholder="Masukkan nama pemilik rekening">
                        </div>
                        <div class="mb-3">
                            <label for="modalBankSelect" class="form-label">Bank</label>
                            <select class="form-select" id="modalBankSelect">
                                <option selected disabled>Pilih Bank</option>
                                @foreach ($banks as $bank)
                                    <option value="{{ $bank->id }}"
                                        {{ $bankUser && $bankUser->bank_id == $bank->id ? 'selected' : '' }}>
                                        {{ $bank->bank_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="modalNomorRekening" class="form-label">Nomor rekening</label>
                            <input type="text" class="form-control" id="modalNomorRekening"
                                value="{{ $bankUser->account_number ?? '' }}" placeholder="Masukkan nomor rekening">
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-end">
                    <button type="button" class="btn btn-primary-custom" id="simpanDataBankBtn">
                        <span class="spinner-border spinner-border-sm me-2 d-none" role="status" id="btnLoadingSpinner"
                            aria-hidden="true"></span>
                        <span id="btnSimpanText">Simpan</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const simpanBtn = document.getElementById('simpanDataBankBtn');
            const btnSpinner = document.getElementById('btnLoadingSpinner');
            const btnText = document.getElementById('btnSimpanText');

            simpanBtn.addEventListener('click', async function() {
                const namaPemilik = document.getElementById('modalNamaPemilikRekening').value.trim();
                const bankId = document.getElementById('modalBankSelect').value;
                const nomorRekening = document.getElementById('modalNomorRekening').value.trim();

                if (!namaPemilik || !bankId || !nomorRekening) {
                    return Swal.fire({
                        icon: 'warning',
                        title: 'Lengkapi Data',
                        text: 'Semua field harus diisi dengan benar.',
                    });
                }

                if (!/^\d+$/.test(nomorRekening)) {
                    return Swal.fire({
                        icon: 'warning',
                        title: 'Nomor rekening tidak valid',
                        text: 'Nomor rekening hanya boleh berisi angka.',
                    });
                }

                simpanBtn.disabled = true;
                btnSpinner.classList.remove('d-none');
                btnText.textContent = 'Menyimpan...';

                try {
                    const res = await axios.post("{{ route('distributor.account.bank.save') }}", {
                        account_name: namaPemilik,
                        bank_id: bankId,
                        account_number: nomorRekening,
                    });

                    const data = res.data;

                    if (data.status) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: data.message,
                        }).then(() => {
                            document.getElementById('namaPemilikRekeningDisplay').value =
                                namaPemilik;
                            document.getElementById('bankDisplay').value = data.bank_name;
                            document.getElementById('nomorRekeningDisplay').value =
                                nomorRekening;

                            bootstrap.Modal.getInstance(document.getElementById(
                                'bankDetailModal')).hide();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: data.message,
                        });
                    }
                } catch (err) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: err.response?.data?.message ||
                            'Terjadi kesalahan saat menyimpan.',
                    });
                } finally {
                    simpanBtn.disabled = false;
                    btnSpinner.classList.add('d-none');
                    btnText.textContent = 'Simpan';
                }
            });
        });
    </script>
@endpush