@extends('admin.layouts.layout-login')

@section('head')
    @if (isset($form_completed) && $form_completed)
        <meta name="form-completed" content="true">
        <meta name="dashboard-url" content="{{ '#' }}">
    @else
        <meta name="form-completed" content="false">
    @endif
@endsection

@section('content')
    <div class="d-flex justify-content-center align-items-center min-vh-100" style="min-height:100vh;">
        <div class="card shadow border-0" style="max-width:600px;width:100%;"
            @if (isset($form_completed) && $form_completed) data-form-completed="true" @endif>
            <div class="card-body p-4">
                @if (isset($form_completed) && $form_completed)
                    {{-- Thank You Content - Show when form is fully submitted --}}
                    <div class="text-center mb-4">
                        <div class="avatar-title rounded-circle bg-success d-inline-block mb-3"
                            style="width:80px;height:80px;">
                            <i class="fas fa-check text-white" style="font-size:2.5rem;"></i>
                        </div>
                        <h3 class="text-success mb-2">Thank You!</h3>
                        <h5 class="text-primary mb-3">Your Application Has Been Submitted Successfully</h5>
                        <p class="text-muted mb-4" style="font-size:15px;">
                            We have received your merchant onboarding application. Our team will review your submission and
                            contact you within 2-3 business days.
                        </p>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3 text-center">
                                <i class="fas fa-file-alt text-primary mb-2" style="font-size:1.5rem;"></i>
                                <h6 class="mb-1">Application Number</h6>
                                <p class="text-muted mb-0">
                                    <strong>{{ $application_number ?? 'APP-' . rand(100000, 999999) }}</strong>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3 text-center">
                                <i class="fas fa-clock text-info mb-2" style="font-size:1.5rem;"></i>
                                <h6 class="mb-1">Processing Time</h6>
                                <p class="text-muted mb-0">2-3 Business Days</p>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info" role="alert">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>What's Next?</strong>
                        <ul class="mb-0 mt-2">
                            <li>You will receive an email confirmation shortly</li>
                            <li>Our verification team will review your documents</li>
                            <li>We'll contact you if any additional information is needed</li>
                            <li>Upon approval, you'll receive your merchant account details</li>
                        </ul>
                    </div>

                    {{-- <div class="d-grid mb-3">
                        <a href="{{ '#' }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                        </a>
                    </div>
                    <div class="text-center">
                        <a href="{{ route('home') ?? '#' }}" class="btn btn-outline-secondary">
                            <i class="fas fa-home me-2"></i>Back to Home
                        </a>
                    </div> --}}
                @else
                    {{-- Form Saved Content - Show when form is saved but not submitted --}}
                    <div class="text-center mb-4">
                        <div class="avatar-title rounded-circle bg-warning d-inline-block mb-3"
                            style="width:80px;height:80px;">
                            <i class="fas fa-save text-white" style="font-size:2.5rem;"></i>
                        </div>
                        <h5 class="text-primary mb-2">Progress Saved Successfully!</h5>
                        <p class="text-muted mb-3" style="font-size:15px;">
                            Your form data has been saved. You can continue from where you left off anytime.
                        </p>
                    </div>

                    <div class="progress mb-4" style="height: 10px;">
                        <div class="progress-bar bg-success" role="progressbar"
                            style="width: {{ $location->percentage_completion ?? 60 }}%;"
                            aria-valuenow="{{ $location->percentage_completion ?? 60 }}" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                    <p class="text-center text-muted small mb-4">
                        {{ $location->percentage_completion ?? 60 }}% Complete
                    </p>

                    {{-- <div class="row mb-4">
                        <div class="col-md-4 mb-3">
                            <div class="text-center">
                                <div class="avatar-title rounded-circle bg-light d-inline-block mb-2"
                                    style="width:48px;height:48px;">
                                    <i class="fas fa-building text-success" style="font-size:1.2rem;"></i>
                                </div>
                                <h6 class="mb-1">Business Info</h6>
                                <small class="text-success"><i class="fas fa-check-circle"></i> Completed</small>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-center">
                                <div class="avatar-title rounded-circle bg-light d-inline-block mb-2"
                                    style="width:48px;height:48px;">
                                    <i class="fas fa-user text-warning" style="font-size:1.2rem;"></i>
                                </div>
                                <h6 class="mb-1">Owner Details</h6>
                                <small class="text-warning"><i class="fas fa-clock"></i> In Progress</small>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-center">
                                <div class="avatar-title rounded-circle bg-light d-inline-block mb-2"
                                    style="width:48px;height:48px;">
                                    <i class="fas fa-university text-muted" style="font-size:1.2rem;"></i>
                                </div>
                                <h6 class="mb-1">Banking Info</h6>
                                <small class="text-muted"><i class="fas fa-circle"></i> Pending</small>
                            </div>
                        </div>
                    </div> --}}

                    <div class="alert alert-success" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        <strong>Good news!</strong> Your progress has been automatically saved. You can safely close this
                        window and return later to continue your application.
                    </div>

                    <div class="d-grid mb-3">
                        <a href="{{ route($next_route['name'], $next_route['params']) }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-arrow-right me-2"></i>Continue Application
                        </a>
                    </div>

                    {{-- <div class="text-center">
                        <a href="{{ '#' }}" class="btn btn-outline-secondary me-2">
                            <i class="fas fa-tachometer-alt me-2"></i>Dashboard
                        </a>
                        <a href="{{ '#' }}" class="btn btn-outline-secondary">
                            <i class="fas fa-home me-2"></i>Home
                        </a>
                    </div> --}}
                @endif
            </div>
        </div>
    </div>
@endsection

@push('page_script')
    <script src="{{ asset('assets/js/merchant/thankyou.js') }}"></script>
@endpush

@push('page_style')
    <style>
        .progress {
            border-radius: 20px;
            background-color: #f8f9fa;
        }

        .progress-bar {
            border-radius: 20px;
            transition: width 0.6s ease;
        }

        .avatar-title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card {
            transition: box-shadow 0.3s ease;
        }

        .alert {
            border: none;
            border-radius: 10px;
        }

        .btn {
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .border {
            border-radius: 8px !important;
        }

        @media (max-width: 576px) {
            .card {
                margin: 1rem;
                max-width: calc(100% - 2rem) !important;
            }
        }
    </style>
@endpush