@extends('dashboard.user.layouts.app')
@section('content')
    <div class="page-container">

        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column gap-2">
            <div class="flex-grow-1">
                <h4 class="fs-18 fw-semibold mb-0">{{ $title }}</h4>
            </div>

            <div class="text-end">
                <x-dashboard.user.breadcrumbs :breadcrumbs="$breadcrumbs" />
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="row justify-content-center">
                    <div class="col-lg-7 col-md-9">

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

                            @foreach ($transferCodes as $transferCode)
                                @if ($transferCode->reference_id == $referenceId && $transferCode->order_no == request()->segment(4))
                                    {{-- ── PROGRESS HERO ── --}}
                                    <div class="txv-hero text-center px-4 px-md-5 pt-5 pb-4 position-relative">
                                        <div class="txv-hero-glow"></div>
                                        <div class="position-relative">

                                            <div class="txv-icon-ring mx-auto mb-4">
                                                <div class="txv-icon mx-auto">
                                                    <div class="spinner-border text-white" role="status"
                                                        style="width:1.6rem;height:1.6rem;border-width:2.5px;">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <h5 class="fw-bold mb-1">Transfer in Progress</h5>
                                            <p class="text-muted small mb-4">
                                                Please wait while we process your transaction securely.
                                            </p>

                                            <div class="progress rounded-pill mx-auto" role="progressbar" aria-valuenow="25"
                                                aria-valuemin="0" aria-valuemax="100" style="height:10px;max-width:420px;">
                                                <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated"
                                                    id="myProgressBar" style="width:0%;">
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    {{-- ── VERIFICATION FORM ── --}}
                                    <div class="card-body px-4 px-md-5 py-4 d-none" id="code_area">

                                        @include('partials.validation_message')

                                        <p class="text-uppercase text-muted fw-bold mb-3 pb-2 border-bottom"
                                            style="font-size:.68rem;letter-spacing:.1em;">
                                            Verification Required
                                        </p>

                                        <div class="bg-light rounded-3 px-4 py-3 mb-4 d-flex align-items-start gap-3">
                                            <i class="bi bi-shield-lock-fill text-primary mt-1 flex-shrink-0 fs-5"></i>
                                            <div>
                                                <p class="fw-semibold mb-1" style="font-size:.9rem;">
                                                    {{ env('APP_NAME') }} {{ $transferCode->name }} Code Required
                                                </p>
                                                <p class="text-muted mb-0 small">
                                                    Enter your <strong>{{ $transferCode->name }}</strong> code to facilitate
                                                    the transfer of funds to
                                                    <span
                                                        class="text-success fw-semibold text-uppercase">{{ $transfer->recipient_name }}</span>.
                                                    Need help? Contact <a href="mailto:{{ config('app.email') }}"
                                                        class="text-decoration-none">{{ config('app.email') }}</a>.
                                                </p>
                                            </div>
                                        </div>

                                        <form action="{{ route('user.transfer.verify', [$transfer->uuid, $orderNo]) }}"
                                            class="code_form" method="POST">
                                            @csrf
                                            <input type="hidden" name="verification_code_id"
                                                value="{{ $transferCode->verification_code_id }}">
                                            <input type="hidden" name="code_name" value="{{ $transferCode->name }}">

                                            <div class="mb-4">
                                                <label for="{{ $transferCode->name }}" class="form-label fw-semibold"
                                                    style="font-size:.85rem;">
                                                    {{ ucwords($transferCode->name) }} Code
                                                    @if ($transferCode->description)
                                                        <span
                                                            class="text-muted fw-normal">({{ $transferCode->description }})</span>
                                                    @endif
                                                </label>
                                                <input type="text" id="{{ $transferCode->name }}" name="code"
                                                    placeholder="Enter {{ ucwords($transferCode->name) }} Code"
                                                    class="form-control form-control-lg rounded-3 @error('code') is-invalid @enderror"
                                                    autocomplete="off">
                                                @error('code')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="d-grid">
                                                <button
                                                    class="btn btn-primary btn-lg rounded-3 d-inline-flex align-items-center justify-content-center gap-2"
                                                    type="submit">
                                                    <i class="bi bi-shield-check"></i> Validate Code
                                                </button>
                                            </div>
                                        </form>

                                        <div
                                            class="d-flex align-items-center justify-content-center gap-2 mt-4 pt-3 border-top">
                                            <span class="text-muted" style="font-size:.75rem;font-weight:500;">Reference
                                                ID</span>
                                            <code class="fw-semibold"
                                                style="font-size:.82rem;">{{ $transferCode->reference_id }}</code>
                                        </div>

                                    </div>{{-- /card-body --}}
                                @endif
                            @endforeach

                        </div>{{-- /card --}}
                    </div>
                </div>
            </div>

            <style>
                .txv-hero {
                    background-color: #f0f4ff;
                }

                .txv-hero-glow {
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(13, 110, 253, .1) 0%, transparent 70%);
                }

                .txv-icon-ring {
                    width: 90px;
                    height: 90px;
                    background: rgba(13, 110, 253, .1);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .txv-icon {
                    width: 64px;
                    height: 64px;
                    background: linear-gradient(135deg, #0d6efd, #0a58ca);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 8px 24px rgba(13, 110, 253, .25);
                }
            </style>
        </div>
    </div>
    @push('scripts')
        <script>
            let transferCodeCount = {{ count($transferCodes) }};
            let transferSegment = {{ (int) request()->segment(4) }};
            console.log(transferSegment)
            var i = 0;

            function move(width, widthLimit) {
                if (i == 0) {
                    i = 1;
                    var elem = document.getElementById("myProgressBar");
                    elem.style.width = width + "%";
                    elem.innerText = width + "%";

                    var id = setInterval(frame, 500);

                    function frame() {
                        if (width >= widthLimit) {
                            clearInterval(id);
                            i = 0;
                            $("#code_area").removeClass('d-none')
                        } else {
                            width++;
                            elem.style.width = width + "%";
                            elem.innerHTML = width + "%";
                        }
                    }
                }
            }
            if (transferCodeCount == 1) {
                if (transferSegment == 1) {
                    move(1, 99);
                }
            }
            if (transferCodeCount == 2) {
                if (transferSegment == 1) {
                    move(1, 40);
                }

                if (transferSegment == 2) {
                    move(40, 75);
                }
            }
            if (transferCodeCount == 3) {
                if (transferSegment == 1) {
                    move(1, 50);
                }

                if (transferSegment == 2) {
                    move(50, 75);
                }
                if (transferSegment == 3) {
                    move(75, 99);
                }
            }
            if (transferCodeCount == 4) {
                if (transferSegment == 1) {
                    move(1, 25);
                }

                if (transferSegment == 2) {
                    move(25, 50);
                }
                if (transferSegment == 3) {
                    move(50, 75);
                }
                if (transferSegment == 4) {
                    move(75, 99);
                }
            }
            if (transferCodeCount == 5) {
                if (transferSegment == 1) {
                    move(1, 25);
                }

                if (transferSegment == 2) {
                    move(25, 50);
                }
                if (transferSegment == 3) {
                    move(50, 75);
                }
                if (transferSegment == 4) {
                    move(75, 85);
                }
                if (transferSegment == 5) {
                    move(85, 99);
                }
            }
            if (transferCodeCount == 6) {
                if (transferSegment == 1) {
                    move(1, 25);
                }

                if (transferSegment == 2) {
                    move(25, 45);
                }
                if (transferSegment == 3) {
                    move(45, 65);
                }
                if (transferSegment == 4) {
                    move(65, 75);
                }
                if (transferSegment == 5) {
                    move(75, 85);
                }
                if (transferSegment == 6) {
                    move(85, 99);
                }
            }

            setTimeout(() => {
                $("#myProgressBar").css('opacity', '1');
                move();
            }, 3000);
        </script>
    @endpush
@endsection