@extends('layouts.app')

@section('title', 'Order #' . $customOrder->order_number . ' - Custom Order Details')

@section('styles')
<style>
    /* Page-specific typography overrides */
    h1 {
        font-family: 'Abril Fatface', cursive;
        font-size: 2.5rem;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    h2 {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.6rem;
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    h3 {
        font-family: var(--font-sans);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .page-intro {
        margin-bottom: var(--spacing-lg);
    }

    .page-intro p {
        color: var(--text-secondary);
        font-size: 1rem;
    }

    /* Timeline-specific styles */
    .timeline-container {
        margin-bottom: var(--spacing-lg);
    }

    .timeline-container.card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .timeline-title {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        text-align: center;
    }

    .timeline {
        display: flex;
        align-items: center;
        gap: 0;
        position: relative;
        overflow-x: auto;
        padding: var(--spacing-md) 0;
    }

    .timeline::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--border-color);
        z-index: 1;
        transform: translateY(-50%);
    }

    .timeline-item {
        flex: 1;
        min-width: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .timeline-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: white;
        border: 3px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-weight: 900;
        font-size: 1.2rem;
        color: var(--text-primary);
        flex-shrink: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    .timeline-item.completed .timeline-circle {
        background-color: var(--accent-pink);
        border-color: var(--accent-pink);
        color: white;
    }

    .timeline-item.active .timeline-circle {
        background-color: var(--accent-light);
        border-color: var(--accent-dark);
        box-shadow: 0 0 0 4px var(--accent-light);
    }

    .timeline-label {
        text-align: center;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.3;
        max-width: 120px;
        margin-top: 60px;
    }

    .timeline-item.completed .timeline-label {
        color: var(--accent-pink);
    }

    .timeline-item.active .timeline-label {
        color: var(--accent-dark);
        font-weight: 700;
    }

    @media (max-width: 768px) {
        .content-grid {
            grid-template-columns: 1fr;
        }

        h1 {
            font-size: 1.8rem;
        }

        .image-gallery {
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        }
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="page-intro">
        <h1>Custom Order Details</h1>
        <p>Order #{{ $customOrder->order_number }}</p>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if (session('info'))
        <div class="alert alert-info">
            {{ session('info') }}
        </div>
    @endif

    <!-- Timeline -->
    <div class="timeline-container card">
        <h2 class="timeline-title">Order Progress</h2>
        <div class="timeline">
            @php
                $timelineSteps = [
                    ['status' => 'submitted', 'label' => 'Order\nSubmitted', 'completed' => $customOrder->status !== null],
                    ['status' => 'deposit_paid', 'label' => 'Deposit\nPaid', 'completed' => $customOrder->deposit_status === 'paid'],
                    ['status' => 'proof_sent', 'label' => 'Proofs\nSent', 'completed' => $customOrder->proofs()->exists()],
                    ['status' => 'proof_approved', 'label' => 'Proofs\nApproved', 'completed' => $customOrder->proofs()->where('status', 'approved')->exists()],
                    ['status' => 'processing', 'label' => 'Processing', 'completed' => $customOrder->status === 'processing'],
                    ['status' => 'shipped', 'label' => 'Order\nShipped', 'completed' => $customOrder->status === 'completed'],
                ];
                
                // Determine current step
                $currentStep = 0;
                if ($customOrder->status === 'completed') $currentStep = 5;
                elseif ($customOrder->status === 'processing') $currentStep = 4;
                elseif ($customOrder->proofs()->where('status', 'approved')->exists()) $currentStep = 3;
                elseif ($customOrder->proofs()->exists()) $currentStep = 2;
                elseif ($customOrder->deposit_status === 'paid') $currentStep = 1;
            @endphp
            
            @foreach ($timelineSteps as $index => $step)
                <div class="timeline-item @if ($index < $currentStep) completed @elseif ($index === $currentStep) active @endif">
                    <div class="timeline-circle">
                        @if ($index < $currentStep)
                            ✓
                        @else
                            {{ $index + 1 }}
                        @endif
                    </div>
                    <div class="timeline-label">{{ $step['label'] }}</div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="content-grid">
        <!-- Main Content -->
        <div>
            <!-- Order Status -->
            <div class="card">
                <h2>Order Status</h2>
                <div class="card-section">
                    <span class="status-badge {{ $customOrder->status }}">
                        {{ str_replace('_', ' ', ucfirst($customOrder->status)) }}
                    </span>
                    <p style="margin-top: var(--spacing-sm); color: var(--text-secondary); font-size: 0.9rem;">
                        Submitted on {{ $customOrder->created_at->format('d M Y \a\t H:i') }}
                    </p>
                </div>
            </div>

            <!-- Design Requirements -->
            <div class="card">
                <h2>Design Requirements</h2>

                <div class="card-section">
                    <h3>Order Type</h3>
                    <p style="color: var(--text-secondary); text-transform: capitalize;">{{ $customOrder->type }}</p>
                </div>

                <div class="card-section">
                    <h3>Dimensions</h3>
                    @if ($customOrder->specifications)
                        <dl style="color: var(--text-secondary);">
                            @if ($customOrder->specifications->length)
                                <div class="spec-group">
                                    <dt>Length:</dt>
                                    <dd>{{ $customOrder->specifications->length }}m</dd>
                                </div>
                            @endif
                            @if ($customOrder->specifications->width)
                                <div class="spec-group">
                                    <dt>Width:</dt>
                                    <dd>{{ $customOrder->specifications->width }}m</dd>
                                </div>
                            @endif
                            @if ($customOrder->specifications->height)
                                <div class="spec-group">
                                    <dt>Height:</dt>
                                    <dd>{{ $customOrder->specifications->height }}m</dd>
                                </div>
                            @endif
                            <div class="spec-group">
                                <dt>Quantity:</dt>
                                <dd>{{ $customOrder->specifications->quantity }}</dd>
                            </div>
                        </dl>
                    @endif
                </div>

                <div class="card-section">
                    <h3>Print Material</h3>
                    @if ($customOrder->specifications->printStock)
                        <p style="color: var(--text-secondary);">{{ $customOrder->specifications->printStock->name }}</p>
                    @endif
                </div>

                <div class="card-section">
                    <h3>Design Brief</h3>
                    <p style="color: var(--text-secondary);">{{ $customOrder->customer_brief }}</p>
                </div>

                @if ($customOrder->specifications->special_instructions)
                    <div class="card-section">
                        <h3>Special Instructions</h3>
                        <p style="color: var(--text-secondary);">{{ $customOrder->specifications->special_instructions }}</p>
                    </div>
                @endif
            </div>

            <!-- Reference Images -->
            @if ($customOrder->files->count() > 0)
                <div class="card">
                    <h2>Reference Images</h2>
                    <div class="image-gallery">
                        @foreach ($customOrder->files as $file)
                            <a href="{{ Storage::url($file->file_path) }}" target="_blank" title="{{ $file->original_filename }}">
                                <img src="{{ Storage::url($file->file_path) }}" alt="{{ $file->original_filename }}">
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Design Proofs -->
            @if ($customOrder->proofs->count() > 0)
                <div class="card">
                    <h2>Design Proofs</h2>
                    @foreach ($customOrder->proofs as $proof)
                        <div class="proof-item {{ $proof->status === 'approved' ? 'approved' : '' }}">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-sm);">
                                <h3>Proof {{ $loop->iteration }}</h3>
                                <span class="status-badge {{ $proof->status }}">
                                    {{ ucfirst($proof->status) }}
                                </span>
                            </div>
                            @if ($proof->file_path)
                                <a href="{{ Storage::url($proof->file_path) }}" target="_blank" style="color: var(--accent-dark); text-decoration: underline; font-size: 0.9rem;">
                                    View Proof File
                                </a>
                            @endif
                            @if ($proof->feedback)
                                <div style="margin-top: var(--spacing-sm); padding: var(--spacing-sm); background: white; border-radius: 4px; border-left: 3px solid var(--accent-dark);">
                                    <strong style="color: var(--text-primary); font-size: 0.9rem;">Feedback:</strong>
                                    <p style="color: var(--text-secondary); font-size: 0.85rem; margin: var(--spacing-xs) 0 0 0;">{{ $proof->feedback }}</p>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div>
            <!-- Cost & Payment Summary -->
            <div class="card">
                <h2>Order Summary</h2>
                
                <!-- Cost Summary -->
                <div class="payment-section">
                    <div class="payment-row">
                        <span>Design Fee:</span>
                        <span>R{{ number_format($customOrder->design_fee, 2) }}</span>
                    </div>
                    @if ($customOrder->material_cost > 0)
                        <div class="payment-row">
                            <span>Material Cost:</span>
                            <span>R{{ number_format($customOrder->material_cost, 2) }}</span>
                        </div>
                    @endif
                    <div class="payment-row total">
                        <span>Total:</span>
                        <span>R{{ number_format($customOrder->total_cost, 2) }}</span>
                    </div>
                </div>

                <!-- Payment Status -->
                <h3 style="margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md);">Payment Status</h3>
                
                <div class="card" style="padding: var(--spacing-sm); background-color: var(--accent-light); margin-bottom: var(--spacing-md);">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
                        <strong>Deposit (20%)</strong>
                        <span class="status-badge {{ $customOrder->deposit_status }}">{{ ucfirst($customOrder->deposit_status) }}</span>
                    </div>
                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">R{{ number_format($customOrder->deposit_amount, 2) }}</p>
                </div>

                <div class="card" style="padding: var(--spacing-sm); background-color: var(--accent-light); margin-bottom: var(--spacing-lg);">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
                        <strong>Balance (80%)</strong>
                        <span class="status-badge {{ $customOrder->balance_status }}">{{ ucfirst($customOrder->balance_status) }}</span>
                    </div>
                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">R{{ number_format($customOrder->balance_amount, 2) }}</p>
                </div>

                <!-- Payment Buttons -->
                @if ($customOrder->deposit_status !== 'paid')
                    <form method="POST" action="{{ route('yoco-custom-deposit') }}">
                        @csrf
                        <input type="hidden" name="custom_order_id" value="{{ $customOrder->id }}">
                        <button type="submit" class="btn">Pay Deposit (R{{ number_format($customOrder->deposit_amount, 2) }})</button>
                    </form>
                @elseif ($customOrder->deposit_status === 'paid' && $customOrder->proofs->where('status', 'approved')->count() > 0 && $customOrder->balance_status !== 'paid')
                    <button class="btn" onclick="alert('Balance payment coming soon')">Pay Balance (R{{ number_format($customOrder->balance_amount, 2) }})</button>
                @endif
            </div>

            <!-- Terms -->
            <div class="terms-box card--pink">
                <h3 style="color: var(--text-primary); margin-top: 0;">Payment Terms</h3>
                <ul>
                    <li>The 20% deposit is non-refundable</li>
                    <li>Balance of 80% must be paid before printing begins</li>
                    @if ($customOrder->library_discount_applied)
                        <li>Design may be added to our library</li>
                    @else
                        <li>Bespoke, exclusive design</li>
                    @endif
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const paymentForm = document.querySelector('form[action*="payment"]');
    if (paymentForm) {
        console.log('Payment form found:', paymentForm);
        console.log('Form action:', paymentForm.action);
        
        paymentForm.addEventListener('submit', function(e) {
            console.log('Payment form submitted!');
            console.log('Form data:', new FormData(this));
        });
    } else {
        console.log('Payment form NOT found');
        console.log('All forms on page:', document.querySelectorAll('form'));
    }
});
</script>
@endsection