@extends('emails.partials.base_template')

@section('title', 'Booking Status Update')
@section('subtitle', 'Your booking status has been updated')

@section('content')
<div class="greeting">Hello {{ $booking->customer_name }},</div>

<div class="content-text">
    We wanted to inform you that your booking status has been updated. Here are the current details:
</div>

<div class="alert alert-info">
    <strong>Status Update:</strong> Your booking has been moved to <strong>{{ ucfirst(str_replace('_', ' ', $newStatus)) }}</strong>
</div>

<div class="info-section">
    <h3>Booking Information</h3>
    <div class="detail-row">
        <span class="detail-label">Booking ID:</span>
        <span class="detail-value highlight">#{{ $booking->id }}</span>
    </div>
    <div class="detail-row">
        <span class="detail-label">Current Status:</span>
        <span class="detail-value status-{{ $newStatus }}">{{ ucfirst(str_replace('_', ' ', $newStatus)) }}</span>
    </div>
    <div class="detail-row">
        <span class="detail-label">Previous Status:</span>
        <span class="detail-value">{{ ucfirst(str_replace('_', ' ', $oldStatus)) }}</span>
    </div>
    <div class="detail-row">
        <span class="detail-label">Updated On:</span>
        <span class="detail-value">{{ now()->format('M d, Y H:i') }}</span>
    </div>
</div>

<div class="info-section">
    <h3>Vehicle & Route Details</h3>
    <div class="detail-row">
        <span class="detail-label">Vehicle Type:</span>
        <span class="detail-value">{{ $booking->vehicle_type }}</span>
    </div>
    <div class="detail-row">
        <span class="detail-label">Pickup Location:</span>
        <span class="detail-value">{{ $booking->pickup_location }}</span>
    </div>
    <div class="detail-row">
        <span class="detail-label">Delivery Location:</span>
        <span class="detail-value">{{ $booking->delivery_location }}</span>
    </div>
    @if($booking->pickup_date)
    <div class="detail-row">
        <span class="detail-label">Pickup Date:</span>
        <span class="detail-value">{{ $booking->pickup_date }}</span>
    </div>
    @endif
    @if($booking->pickup_time)
    <div class="detail-row">
        <span class="detail-label">Pickup Time:</span>
        <span class="detail-value">{{ $booking->pickup_time }}</span>
    </div>
    @endif
</div>

@if($newStatus === 'confirmed')
<div class="alert alert-success">
    <strong>Great News!</strong> Your booking has been confirmed. We're preparing your vehicle for transport.
</div>
@elseif($newStatus === 'in_progress')
<div class="alert alert-info">
    <strong>Transport in Progress:</strong> Your vehicle is now being prepared for pickup.
</div>
@elseif($newStatus === 'picked_up')
<div class="alert alert-info">
    <strong>Vehicle Picked Up:</strong> Your vehicle has been successfully picked up and is now in transit.
</div>
@elseif($newStatus === 'in_transit')
<div class="alert alert-info">
    <strong>In Transit:</strong> Your vehicle is currently being transported to the delivery location.
</div>
@elseif($newStatus === 'delivered')
<div class="alert alert-success">
    <strong>Delivered!</strong> Your vehicle has been successfully delivered to the destination.
</div>
@elseif($newStatus === 'completed')
<div class="alert alert-success">
    <strong>Transport Completed:</strong> Your vehicle transport has been completed successfully. Thank you for choosing our services!
</div>
@elseif($newStatus === 'cancelled')
<div class="alert alert-warning">
    <strong>Booking Cancelled:</strong> Your booking has been cancelled. If you have any questions, please contact our support team.
</div>
@endif

@if($notes)
<div class="info-section">
    <h3>Additional Notes</h3>
    <div class="content-text">
        {{ $notes }}
    </div>
</div>
@endif

<div class="content-text">
    <strong>Need Help?</strong><br>
    If you have any questions about your booking or need assistance, please don't hesitate to contact our support team.
</div>

<div class="content-text">
    <strong>Track Your Booking:</strong> 
    <a href="{{ env('FRONTEND_URL', 'http://localhost:5173') }}/account?tab=quotes-and-bookings" style="color: #007bff; text-decoration: none;">
        View Booking Details
    </a>
</div>

<div class="content-text">
    Thank you for choosing our transport services!
</div>
@endsection

@push('styles')
<style>
.status-pending { color: #ffc107; font-weight: bold; }
.status-confirmed { color: #007bff; font-weight: bold; }
.status-in_progress { color: #17a2b8; font-weight: bold; }
.status-picked_up { color: #6f42c1; font-weight: bold; }
.status-in_transit { color: #20c997; font-weight: bold; }
.status-delivered { color: #28a745; font-weight: bold; }
.status-completed { color: #28a745; font-weight: bold; }
.status-cancelled { color: #dc3545; font-weight: bold; }
</style>
@endpush