@extends('themes.one.master')

@php
    $pageInfo = [];
    $title = '';
    $desc = '';
    foreach($pageSettings as $page){
        if($page['page'] == $currentPageSlug){
            $pageInfo = $page;
            $title = transField($page, 'title') ?? __('Donate Us');
            $desc = transField($page, 'description');
        }
    }
@endphp

@section('title', $title)

@section('content')
    
<section class="space-ptb">
    <div class="container">

        <div class="shadow-sm p-4 bg-white border-radius" style="background-color:  !important;">

            {{-- Title --}}
            <div style="text-align: center;">
                <h4 class="mb-4">{{ transField($pageInfo, 'title') ?? __('Supporters & Benefactors') }}</h4>
                <span class="bg-light text-dark mb-3">{!! transField($pageInfo, 'description') ??  __('Complete the steps to donate') !!}</span>
            </div>

            {{-- Progress Bar --}}
            <div class="progress mb-4" style="height: 5px;">
                <div id="wizardProgress" class="progress-bar bg-primary" style="width: 33%;"></div>
            </div>

            {{-- STEP 1 --}}
            <div class="step step-1">

                <h5 class="mb-3 text-primary fw-semibold">{{ __('Step 1: Basic Information') }}</h5>
                <div id="errorStep1" class="alert alert-danger d-none"></div>

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

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>{{ __('Name') }} *</label>
                            <input type="text" name="name" class="form-control bg-white border">
                        </div>

                        <div class="form-group col-md-6">
                            <label>{{ __('Email') }} *</label>
                            <input type="email" name="email" class="form-control bg-white border">
                        </div>

                        <div class="form-group col-md-6">
                            <label>{{ __('Phone') }} *</label>
                            <input type="text" name="phone" class="form-control bg-white border">
                        </div>

                        <div class="form-group col-md-6">
                            <label>{{ __('Donation Type') }} *</label>
                            <select name="donation_mode" class="form-control bg-white border">
                                <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="form-group col-md-12">
                            <label>{{ __('Message') }} ({{ __('Optional') }})</label>
                            <textarea name="message" class="form-control bg-white border"></textarea>
                        </div>
                    </div>

                    <div class="text-end mt-3">
                        <button type="submit" class="btn btn-primary px-4">{{ __('Next') }} →</button>
                    </div>
                </form>
            </div>

            {{-- STEP 2 --}}
            <div class="step step-2 d-none">

                <h5 class="mb-3 text-primary fw-semibold">{{ __('Step 2: Payment Details') }}</h5>

                <p>{{ __('Please transfer your donation using the below details') }}:</p>

                <div class="p-3 border rounded bg-light">
                    <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>

                    <h6 class="mt-3 fw-semibold">{{ __('Scan & Pay') }}</h6>
                    <div id="qr_container"></div>
                </div>

                <div class="mt-3">
                    <button class="btn btn-outline-secondary prev-to-step1">← {{ __('Back') }}</button>
                    <button class="btn btn-primary next-to-step3">{{ __('Next') }} →</button>
                </div>
            </div>

            {{-- STEP 3 --}}
            <div class="step step-3 d-none">

                <h5 class="mb-3 text-primary fw-semibold">{{ __('Step 3: Upload Payment Screenshot') }}</h5>

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

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

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>{{ __('Transaction ID') }}</label>
                            <input type="text" name="transaction_id" class="form-control bg-white border">
                        </div>

                        <div class="form-group col-md-6">
                            <label>{{ __('Payment Date') }}</label>
                            <input type="date" name="paid_at" class="form-control bg-white border">
                        </div>

                        <div class="form-group col-md-12">
                            <label>{{ __('Payment Screenshot') }}</label>
                            <input type="file" name="image" class="form-control bg-white border">
                        </div>
                    </div>

                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-secondary prev-to-step2">← {{ __('Back') }}</button>
                        <button type="submit" class="btn btn-success">{{ __('Submit Donation') }}</button>
                    </div>
                </form>

            </div>
        </div>

    </div>
</section>

@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