@extends('layouts.headpelanggan')
@section('title', 'Pembayaran')
@section('content')

<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header d-flex justify-content-between py-3 ">
            <a href="#"
               onclick="window.history.length > 1 ? history.back() : window.location.href='{{ route('pelanggan.index') }}';"
               class="btn btn-secondary btn-icon-split"
               data-bs-toggle="tooltip"
               data-bs-placement="top">
                <span class="icon text-white-50">
                    <i class="fas fa-arrow-left"></i>
                </span>
            </a>
            <h5 class=" font-weight-bold d-flex justify-content-center align-items-center w-100">Pembayaran</h5>
        </div>
        <div class="card-body">



            <div class="container mt-4">
                <div class="row">
                    <!-- Kontainer Kiri -->
                    <div class="col-12 col-md-6 mb-3">
                        
                              <div class="card shadow-sm rounded-4" style="max-width: 400px; margin: auto; background: linear-gradient(135deg, #007bff, #6610f2); color: white;">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h5 class="card-title mb-0 text-uppercase">Rekening Bank</h5>
                                            <span class="badge bg-light text-dark">BCA</span>
                                        </div>

                                        <hr class="border-light opacity-25">

                                        <p class="mb-1 small text-light">Nama Pemilik</p>
                                        <p class="h6 fw-semibold">Purba *****</p>

                                        <p class="mb-1 small text-light mt-3">Nomor Rekening</p>
                                        <p class="h5 fw-bold">123 **** **** ***</p>
                                    </div>
                                </div>
                        
                    </div>

                    <!-- Kontainer Kanan -->
                    <div class="col-12 col-md-6 mb-3">
                        
                          
                            <h5><strong>Tambah masa aktif:</strong></h5>

                          @php
                            $jumlahBulan = max($jumlahBulanTertunggak, 1);
                        @endphp

                        <div class="mb-3">
                            <label for="input-bulan" class="form-label">Bayar untuk berapa bulan?</label>
                            
                            <div class="input-group" style="max-width: 200px;">
                                <button class="btn btn-outline-secondary" type="button" id="btn-minus">−</button>
                                <input type="number" class="form-control text-center" id="input-bulan"
                                    value="1" min="1" max="10" data-harga="{{ $hargaPerBulan }}">
                                <button class="btn btn-outline-secondary" type="button" id="btn-plus">+</button>
                            </div>
                        </div>

                        <p id="tagihan-rincian">1 bulan x Rp{{ number_format($hargaPerBulan, 0, ',', '.') }}</p>
                        <h4 id="tagihan-total"><strong>Total: Rp{{ number_format($hargaPerBulan, 0, ',', '.') }}</strong></h4>

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


         
            
          
        

            {{-- Form Pembayaran --}}
            <form action="{{ route('pelanggan.pembayaran.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="mb-3">
                    <!-- keterangan -->
                    <input type="hidden" name="keterangan" id="keterangan" class="form-control @error('keterangan') is-invalid @enderror" value="{{ old('keterangan') }}">
                    @error('keterangan')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Bukti</label>
                    <div class="custom-file">
                        <input type="file" name="bukti" id="bukti" class="custom-file-input" accept=".jpg,.jpeg,.png">
                        <label class="custom-file-label" for="bukti">Pilih file...</label>
                        @error('bukti')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div id="preview-container" class="mt-3">
                        <img id="image-preview" src="" alt="Preview" style="display: none; max-width: 200px; border-radius: 10px; margin-bottom: 10px;">
                        <p id="file-name" style="font-size: 14px; color: #555;"></p>
                    </div>
                </div>

                <button type="submit" class="btn btn-success">Simpan</button>
            </form>
        </div>
    </div>
</div>

<!-- Script -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('input-bulan');
        const btnMinus = document.getElementById('btn-minus');
        const btnPlus = document.getElementById('btn-plus');
        const rincian = document.getElementById('tagihan-rincian');
        const total = document.getElementById('tagihan-total');
        const hargaPerBulan = parseInt(input.dataset.harga);
        const maxBulan = parseInt(input.max);

        function formatRupiah(angka) {
            return angka.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }

       function updateTagihan() {
    let bulan = parseInt(input.value);
    if (isNaN(bulan) || bulan < 1) bulan = 1;
    if (bulan > maxBulan) bulan = maxBulan;

    input.value = bulan;

    rincian.textContent = `${bulan} bulan x Rp${formatRupiah(hargaPerBulan)}`;
    total.innerHTML = `<strong>Total: Rp${formatRupiah(bulan * hargaPerBulan)}</strong>`;

    // Auto isi kolom keterangan
    const keterangan = document.getElementById('keterangan');
    if (keterangan) {
        keterangan.value = `Pembayaran untuk ${bulan} bulan`;
    }
}

        btnMinus.addEventListener('click', () => {
            let val = parseInt(input.value) || 1;
            if (val > 1) {
                input.value = val - 1;
                updateTagihan();
            }
        });

        btnPlus.addEventListener('click', () => {
            let val = parseInt(input.value) || 1;
            if (val < maxBulan) {
                input.value = val + 1;
                updateTagihan();
            }
        });

        input.addEventListener('input', updateTagihan);
    });
</script>

<script>
    const hargaPerBulan = {{ $hargaPerBulan }};

    function formatRupiah(angka) {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0
        }).format(angka).replace(',00', '');
    }

    function updateTagihan() {
        const bulan = parseInt(document.getElementById('select-bulan').value);
        const total = bulan * hargaPerBulan;

        document.getElementById('tagihan-rincian').textContent =
            `${bulan} bulan x Rp${hargaPerBulan.toLocaleString('id-ID')}`;
        document.getElementById('tagihan-total').innerHTML =
            `<strong>Total: ${formatRupiah(total)}</strong>`;
    }

    document.addEventListener('DOMContentLoaded', function () {
        const selectBulan = document.getElementById('select-bulan');
        if (selectBulan) {
            updateTagihan();
            selectBulan.addEventListener('change', updateTagihan);
        }

        // preview gambar
        const fileInput = document.getElementById('bukti');
        const imagePreview = document.getElementById('image-preview');
        const fileName = document.getElementById('file-name');

        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                fileName.textContent = `Nama File: ${file.name}`;
                const reader = new FileReader();
                reader.onload = function (e) {
                    imagePreview.src = e.target.result;
                    imagePreview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            } else {
                fileName.textContent = '';
                imagePreview.style.display = 'none';
                imagePreview.src = '';
            }
        });
    });
</script>

@endsection