@extends('themes.six.master')

@section('title','Donate Us')

@section('content')
<div class="container py-4">

    <div class="card shadow-lg border-0 rounded-4 overflow-hidden">

        {{-- Header --}}
        <div class="card-header text-white text-center py-3" style="background: #1bb4b9 !important;">>
            <h2 class="h5 mb-0">Supporters & Benefactors</h2>
            <p class="small mb-0 opacity-75">Complete the steps to donate</p>
        </div>

        <div class="progress rounded-0" style="height:5px;">
            <div id="wizardProgress" class="progress-bar bg-primary" style="width: 33%;"></div>
        </div>

        <div class="card-body">

            {{-- STEP 1 --}}
            <div class="step step-1">
                <h4>Step 1: Basic Information</h4>

                <div id="errorStep1" class="alert alert-danger d-none"></div>

                <form id="step1Form">
                    @csrf
                    <input type="hidden" name="section" value="donation-record">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Name *</label>
                            <input type="text" name="name" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label>Email *</label>
                            <input type="email" name="email" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label>Phone *</label>
                            <input type="text" name="phone" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label>Donation Type *</label>
                            <select name="donation_mode" class="form-control">
                                <option value="">--Select Donation Mode--</option>
                                <option value="donate_now">Donate Now</option>
                                <option value="contact_first">Contact me first</option>
                            </select>
                        </div>

                        <div class="col-md-12">
                            <label>Message (optional)</label>
                            <textarea name="message" class="form-control"></textarea>
                        </div>

                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-primary px-4">Next →</button>
                        </div>
                    </div>

                </form>
            </div>

            {{-- STEP 2 --}}
            <div class="step step-2 d-none">
                <h4>Step 2: Payment Details</h4>

                <p>Please transfer your donation using the below details:</p>

                <div class="card p-3">
                    <strong>Bank Name:</strong> <span id="bank_name"></span> <br>
                    <strong>A/C No:</strong> <span id="account_no"></span> <br>
                    <strong>Account Holder Name:</strong> <span id="account_name"></span> <br>

                    <h5 class="mt-3">Scan & Pay</h5>
                    <div id="qr_container"></div> <!-- FIXED! -->
                </div>

                <button class="btn btn-secondary mt-3 prev-to-step1">← Back</button>
                <button class="btn btn-primary mt-3 next-to-step3">Next →</button>
            </div>

            {{-- STEP 3 --}}
            <div class="step step-3 d-none">
                <h4>Step 3: Upload Payment Screenshot</h4>

                <form id="step3Form" enctype="multipart/form-data">
                    @csrf

                    <div id="errorStep3" class="alert alert-danger d-none"></div>

                    <div class="mb-3">
                        <label>Transaction ID</label>
                        <input type="text" name="transaction_id" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Payment Date</label>
                        <input type="date" name="paid_at" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label>Payment Screenshot</label>
                        <input type="file" name="image" class="form-control">
                    </div>

                    <button type="button" class="btn btn-secondary prev-to-step2">← Back</button>
                    <button type="submit" class="btn btn-success">Submit Donation</button>

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

</div>
@endsection

@section('script')
<script>
    $(function(){
        console.log("SCRIPT LOADED");
    })

    // SHOW STEPS
    function showStep(step) {
        document.querySelectorAll('.step').forEach(s => s.classList.add('d-none'));
        document.querySelector('.step-' + step).classList.remove('d-none');

        const progress = document.getElementById('wizardProgress');
        if (step == 1) progress.style.width = '33%';
        if (step == 2) progress.style.width = '66%';
        if (step == 3) progress.style.width = '100%';
    }

    // STEP 1
    document.getElementById('step1Form').addEventListener('submit', function(e){
        e.preventDefault();

        let form = new FormData(this);

        fetch("{{ url('/donate/step1') }}", {
            method: 'POST',
            body: form
        })
        .then(res => res.json())
        .then(data => {

            if (data.step === 'contact_first') {
                let box = document.getElementById('errorStep1');
                box.classList.remove('alert-danger');
                box.classList.add('alert-success');
                box.innerHTML = data.message;
                box.classList.remove('d-none');
                this.reset();
                return;
            }

            if (data.step === 2) {
                showStep(2);

                const p = data.payment;

                $('#bank_name').html(p.title);
                $('#account_no').html(p.title2);
                $('#account_name').html(p.account_name);

                // FIXED QR RENDER
                $('#qr_container').html(`
                    <img src="${p.image}" width="200" class="img-fluid rounded border" alt="QR Code">
                `);
            }
        });
    });

    // STEP 2 → STEP 3
    document.querySelector('.next-to-step3').addEventListener('click', function(){
        fetch("{{ url('/donate/step2') }}", {
            method: 'POST',
            headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" }
        })
        .then(res => res.json())
        .then(() => showStep(3));
    });

    // STEP 3 SUBMIT
    document.getElementById('step3Form').addEventListener('submit', function(e){
        e.preventDefault();
        let form = new FormData(this);

        fetch("{{ url('/donate/step3') }}", {
            method: 'POST',
            body: form
        })
        .then(res => res.json())
        .then(data => {

            if (data.status === 'success') {
                showStep(1);

                let box = document.getElementById('errorStep1');
                box.classList.remove('alert-danger');
                box.classList.add('alert-success');
                box.innerHTML = data.message;
                box.classList.remove('d-none');

                document.getElementById('step1Form').reset();
                this.reset();
            }
        });
    });

    // BACK BUTTONS
    document.querySelector('.prev-to-step1')?.addEventListener('click', ()=> showStep(1));
    document.querySelector('.prev-to-step2')?.addEventListener('click', ()=> showStep(2));

</script>
@endsection