@extends('layouts.guest-horizontal')
@section('content')
    <div class="content-heading">
        <div>
            Application Status
            <small>Reference Number: <strong>{{ $application->reference_number }}</strong></small>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mx-auto">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <div class="card-title">Track Your Application</div>
                </div>
                <div class="card-body">

                    <!-- Status Progress -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h5 class="mb-0">Current Status</h5>
                            <span class="badge badge-pill
                                @if($application->status == 'submitted') badge-warning
                                @elseif($application->status == 'approved') badge-info
                                @elseif($application->status == 'payment_pending') badge-orange
                                @elseif($application->status == 'payment_completed') badge-cyan
                                @elseif($application->status == 'meter_assigned') badge-purple
                                @elseif($application->status == 'installation_pending') badge-indigo
                                @elseif($application->status == 'installation_completed') badge-success
                                @elseif($application->status == 'active') badge-success
                                @elseif($application->status == 'rejected') badge-danger
                                @endif
                            ">
                                {{ ucwords(str_replace('_', ' ', $application->status)) }}
                            </span>
                        </div>

                        <!-- Progress Bar -->
                        <div class="mt-3">
                            <small class="text-muted d-flex justify-content-between mb-1">
                                <span>Application Progress</span>
                                <span>{{ $application->isInStep(1) ? '1' : ($application->isInStep(2) ? '2' : ($application->isInStep(3) ? '3' : ($application->isInStep(4) ? '4' : ($application->isInStep(5) || $application->isInStep(6) ? '5-6' : '0')))) }}/6 Steps</span>
                            </small>
                            <div class="progress">
                                <div class="progress-bar
                                    @if($application->status == 'submitted') bg-warning
                                    @elseif($application->status == 'approved') bg-info
                                    @elseif($application->status == 'payment_pending' || $application->status == 'payment_completed') bg-success
                                    @elseif($application->status == 'meter_assigned') bg-primary
                                    @elseif($application->status == 'installation_pending' || $application->status == 'installation_completed') bg-primary
                                    @elseif($application->status == 'active') bg-success
                                    @elseif($application->status == 'rejected') bg-danger
                                    @endif
                                " role="progressbar" style="width: 
                                    @if($application->status == 'submitted') 16.66%
                                    @elseif($application->status == 'approved') 33.33%
                                    @elseif($application->status == 'payment_pending' || $application->status == 'payment_completed') 50%
                                    @elseif($application->status == 'meter_assigned') 66.66%
                                    @elseif($application->status == 'installation_pending' || $application->status == 'installation_completed') 83.33%
                                    @elseif($application->status == 'active') 100%
                                    @elseif($application->status == 'rejected') 0%
                                    @endif
                                " aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>

                    <hr />

                    <!-- Applicant Information -->
                    <div class="mb-4">
                        <h5>Applicant Information</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted">Full Name</p>
                                <p class="font-weight-bold">{{ $application->first_name }} {{ $application->last_name }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted">Email</p>
                                <p class="font-weight-bold">{{ $application->email }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted">Phone</p>
                                <p class="font-weight-bold">{{ $application->phone }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted">Submission Date</p>
                                <p class="font-weight-bold">{{ $application->created_at->format('M d, Y \a\t g:i A') }}</p>
                            </div>
                        </div>
                    </div>

                    <hr />

                    <!-- Property Information -->
                    <div class="mb-4">
                        <h5>Property Information</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted">Street Address</p>
                                <p class="font-weight-bold">{{ $application->street_address }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted">Barangay</p>
                                <p class="font-weight-bold">{{ $application->barangay }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted">City</p>
                                <p class="font-weight-bold">{{ $application->city }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted">Province</p>
                                <p class="font-weight-bold">{{ $application->province }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="text-muted">Zip Code</p>
                                <p class="font-weight-bold">{{ $application->zip_code }}</p>
                            </div>
                            @if($application->meter_location)
                                <div class="col-md-6">
                                    <p class="text-muted">Meter Location</p>
                                    <p class="font-weight-bold">{{ $application->meter_location }}</p>
                                </div>
                            @endif
                        </div>
                        @if($application->property_description)
                            <div class="row">
                                <div class="col-12">
                                    <p class="text-muted">Property Description</p>
                                    <p class="font-weight-bold">{{ $application->property_description }}</p>
                                </div>
                            </div>
                        @endif
                    </div>

                    <hr />

                    <!-- Application Timeline -->
                    <div class="mb-4">
                        <h5 class="mb-3">Application Timeline</h5>
                        <div class="timeline">
                            <!-- Step 1: Application Submitted -->
                            <div class="timeline-item completed">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Application Submitted</h6>
                                    <p class="text-muted small mb-0">{{ $application->created_at ? \Carbon\Carbon::parse($application->created_at)->format('M d, Y H:i') : 'N/A' }}</p>
                                </div>
                            </div>

                            <!-- Step 2: Approval -->
                            <div class="timeline-item @if(in_array($application->status, ['approved', 'payment_pending', 'payment_completed', 'meter_assigned', 'installation_pending', 'installation_completed', 'active'])) completed @endif">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Application Approved</h6>
                                    @if(in_array($application->status, ['approved', 'payment_pending', 'payment_completed', 'meter_assigned', 'installation_pending', 'installation_completed', 'active']))
                                        <p class="text-muted small mb-1">{{ $application->approved_at ? \Carbon\Carbon::parse($application->approved_at)->format('M d, Y H:i') : 'N/A' }}</p>
                                        <p class="small mb-0"><strong>Approved By:</strong> {{ $application->approver->name ?? 'N/A' }}</p>
                                    @else
                                        <p class="text-muted small mb-0">Pending approval</p>
                                    @endif
                                </div>
                            </div>

                            <!-- Step 3: Payment -->
                            <div class="timeline-item @if(in_array($application->status, ['payment_completed', 'meter_assigned', 'installation_pending', 'installation_completed', 'active'])) completed @endif">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Payment Completed</h6>
                                    @if(in_array($application->status, ['payment_completed', 'meter_assigned', 'installation_pending', 'installation_completed', 'active']))
                                        <p class="text-muted small mb-1">{{ $application->payment_date ? \Carbon\Carbon::parse($application->payment_date)->format('M d, Y H:i') : 'N/A' }}</p>
                                        <p class="small mb-0"><strong>Reference:</strong> {{ $application->payment_reference ?? 'N/A' }}</p>
                                    @else
                                        <p class="text-muted small mb-0">Pending payment</p>
                                    @endif
                                </div>
                            </div>

                            <!-- Step 4: Meter Assigned -->
                            <div class="timeline-item @if(in_array($application->status, ['meter_assigned', 'installation_pending', 'installation_completed', 'active'])) completed @endif">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Meter Assigned & Account Created</h6>
                                    @if(in_array($application->status, ['meter_assigned', 'installation_pending', 'installation_completed', 'active']))
                                        <p class="small mb-1"><strong>Meter Number:</strong> {{ $application->meter_number ?? 'N/A' }}</p>
                                        @if($application->client)
                                            <p class="small mb-0"><strong>Account Number:</strong> {{ $application->client->account_number }}</p>
                                        @endif
                                    @else
                                        <p class="text-muted small mb-0">Pending meter assignment</p>
                                    @endif
                                </div>
                            </div>

                            <!-- Step 5: Installation -->
                            <div class="timeline-item @if(in_array($application->status, ['installation_pending', 'installation_completed', 'active'])) completed @endif">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Installation Scheduled</h6>
                                    @if(in_array($application->status, ['installation_pending', 'installation_completed', 'active']))
                                        <p class="text-muted small mb-1">{{ $application->installation_scheduled_date ? \Carbon\Carbon::parse($application->installation_scheduled_date)->format('M d, Y') : 'N/A' }}</p>
                                        <p class="small mb-0"><strong>Installer:</strong> {{ $application->installer->name ?? 'N/A' }}</p>
                                    @else
                                        <p class="text-muted small mb-0">Pending installation scheduling</p>
                                    @endif
                                </div>
                            </div>

                            <!-- Step 6: Installation Completed -->
                            <div class="timeline-item @if(in_array($application->status, ['installation_completed', 'active'])) completed @endif">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Installation Completed</h6>
                                    @if(in_array($application->status, ['installation_completed', 'active']))
                                        <p class="text-muted small mb-1">{{ $application->installation_completed_date ? \Carbon\Carbon::parse($application->installation_completed_date)->format('M d, Y H:i') : 'N/A' }}</p>
                                        <p class="small mb-0"><strong>Status:</strong> 
                                            @switch($application->installation_status)
                                                @case('completed')
                                                    <span class="badge badge-success">Completed Successfully</span>
                                                    @break
                                                @default
                                                    <span class="badge badge-secondary">{{ $application->installation_status ?? 'N/A' }}</span>
                                            @endswitch
                                        </p>
                                    @else
                                        <p class="text-muted small mb-0">Pending installation completion</p>
                                    @endif
                                </div>
                            </div>

                            <!-- Step 7: Active -->
                            <div class="timeline-item @if($application->status === 'active') completed @endif">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Service Activated</h6>
                                    @if($application->status === 'active')
                                        <p class="text-muted small mb-0">Account is now active and in service</p>
                                    @else
                                        <p class="text-muted small mb-0">Pending final activation</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr />
                    <div class="text-center">
                        <a href="/" class="btn btn-primary">
                            <em class="icon-arrow-left"></em>
                            Back to Home
                        </a>
                    </div>

                    <!-- Info Alert -->
                    <div class="alert alert-info mt-4">
                        <strong>Status Updates:</strong> Your status will be updated as your application progresses. You can check back anytime using your reference number: <strong>{{ $application->reference_number }}</strong>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
@endsection

@section('styles')
<style>
/* Timeline Styles - Horizontal Single Row */
.timeline {
    position: relative;
    padding: 40px 0;
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    gap: 0;
}

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

/* Horizontal connecting line */
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: calc(100% - 20px);
    height: 2px;
    background-color: #dee2e6;
    z-index: 0;
}

.timeline-item.completed:not(:last-child)::after {
    background-color: #198754;
}

.timeline-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #dee2e6;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-item.completed .timeline-marker {
    background-color: #198754;
    border-color: #198754;
}

.timeline-marker::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #198754;
    border-radius: 50%;
    display: none;
}

.timeline-item.completed .timeline-marker::after {
    display: block;
    background-color: white;
}

.timeline-content {
    text-align: center;
    z-index: 1;
    padding: 0 10px;
}

.timeline-content h6 {
    margin-bottom: 4px;
    font-weight: 600;
    color: #333;
    font-size: 0.8rem;
    line-height: 1.2;
}

.timeline-item.completed .timeline-content h6 {
    color: #198754;
}

.timeline-content .text-muted {
    color: #999 !important;
    font-size: 0.7rem;
    margin: 2px 0;
}

.timeline-content .small {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.3;
    margin: 2px 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .timeline-item {
        min-width: 120px;
    }
    
    .timeline-content h6 {
        font-size: 0.75rem;
    }
    
    .timeline-content .text-muted,
    .timeline-content .small {
        font-size: 0.65rem;
    }
}

@media (max-width: 768px) {
    .timeline {
        padding: 30px 0;
    }
    
    .timeline-item {
        min-width: 100px;
    }
    
    .timeline-content h6 {
        font-size: 0.7rem;
    }
    
    .timeline-content .text-muted,
    .timeline-content .small {
        font-size: 0.6rem;
    }
}
</style>
@endsection