@extends('layouts.app')

@section('title', 'Deposit Payment Successful')

@section('styles')
<style>
    .success-container {
        text-align: center;
        margin: 3rem 0;
    }

    .success-icon {
        font-size: 4rem;
        margin-bottom: 1.5rem;
    }

    h1 {
        font-family: 'Abril Fatface', cursive;
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }

    .subtitle {
        color: #666;
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .order-details {
        margin: 2rem 0;
        text-align: left;
    }

    .order-details-inner {
        padding: 2rem;
        border-radius: 20px;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 1rem 0;
        border-bottom: 1px solid #eee;
    }

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-label {
        font-weight: 600;
        color: var(--primary-color);
    }

    .detail-value {
        color: #666;
    }

    .next-steps-title {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.3rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        text-align: left;
    }

    .next-steps-inner {
        padding: 2rem;
        border-radius: 20px;
    }

    .next-steps ul {
        color: #666;
        padding-left: 0;
        list-style: none;
    }

    .next-steps li {
        margin-bottom: 0.8rem;
    }

    .actions {
        margin-top: 2rem;
        text-align: center;
    }
</style>
@endsection

@section('content')
<main class="container">
    <div class="success-container">
        <div class="success-icon">✓</div>
        <h1>Deposit Payment Successful!</h1>
        <p class="subtitle">Your deposit payment has been received and processed successfully.</p>

        <!-- Order Details -->
        <div class="order-details card">
            <div class="order-details-inner">
                <div class="detail-row">
                    <span class="detail-label">Order Number:</span>
                    <span class="detail-value"><strong>{{ $customOrder->order_number }}</strong></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Order Type:</span>
                    <span class="detail-value">{{ ucfirst($customOrder->type) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Deposit Amount Paid:</span>
                    <span class="detail-value"><strong>R{{ number_format($customOrder->deposit_amount, 2) }}</strong></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Remaining Balance:</span>
                    <span class="detail-value">R{{ number_format($customOrder->balance_amount, 2) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Total Project Cost:</span>
                    <span class="detail-value"><strong>R{{ number_format($customOrder->total_cost, 2) }}</strong></span>
                </div>
            </div>
        </div>

        <!-- What's Next -->
        <div class="card--pink">
            <div class="next-steps-inner">
                <h2 class="next-steps-title" style="text-align: center;">What Happens Next?</h2>
                <ul class="next-steps">
                    <li>Your design requirements have been received and confirmed</li>
                    <li>Our design team will review your specifications and reference images</li>
                    <li>You'll receive proof designs for your approval within 3-5 business days</li>
                    <li>Once you approve the proofs, we'll prepare for printing</li>
                    <li>The remaining balance (80%) will be due before printing begins</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="actions">
        <a href="{{ route('custom-orders.show', $customOrder) }}" class="btn">View Order Details</a>
        <a href="{{ route('custom-orders.index') }}" class="btn btn--secondary">Back to My Orders</a>
    </div>
</main>
@endsection