<?php
/**
 * @var object $appointment
 * @var array $appointmentServices
 */
?>
<div class="page-title mb-4">
    <h5><i class="fas fa-calendar-alt me-2 text-gold"></i>Appointment #<?= $appointment->id ?></h5>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="glass-card p-0">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-info-circle card-icon"></i>
                    <h6 class="card-title">Appointment Details</h6>
                </div>
                <div>
                    <span class="badge bg-<?= statusBadge($appointment->status) ?> fs-6">
                        <?= e(ucwords(str_replace('_', ' ', $appointment->status))) ?>
                    </span>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <h6 class="text-gold mb-3"><i class="fas fa-user me-2"></i>Customer</h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted" width="100">Name</td>
                                <td><strong><?= e($appointment->customer_first_name . ' ' . $appointment->customer_last_name) ?></strong></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Email</td>
                                <td><?= e($appointment->customer_email ?? '-') ?></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Phone</td>
                                <td><?= e($appointment->customer_phone ?? '-') ?></td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-gold mb-3"><i class="fas fa-clock me-2"></i>Schedule</h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted" width="100">Date</td>
                                <td><strong><?= formatDate($appointment->start_time) ?></strong></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Time</td>
                                <td>
                                    <?= date(TIME_FORMAT, strtotime($appointment->start_time)) ?> -
                                    <?= date(TIME_FORMAT, strtotime($appointment->end_time)) ?>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">Duration</td>
                                <td><?= (strtotime($appointment->end_time) - strtotime($appointment->start_time)) / 60 ?> min</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <?php if (!empty($appointment->notes)): ?>
                    <div class="mt-3">
                        <h6 class="text-gold mb-2"><i class="fas fa-sticky-note me-2"></i>Notes</h6>
                        <p class="mb-0"><?= nl2br(e($appointment->notes)) ?></p>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <div class="glass-card p-0 mt-4">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-concierge-bell card-icon"></i>
                    <h6 class="card-title">Services</h6>
                </div>
                <span class="badge bg-gold"><?= count($appointmentServices) ?> service(s)</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-dark table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Service</th>
                                <th class="text-center">Duration</th>
                                <th class="text-end">Price</th>
                                <th>Employee</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($appointmentServices as $aps): ?>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="rounded-circle d-inline-block"
                                                  style="width:10px;height:10px;background:<?= e($aps->color ?? '#C8A44E') ?>;"></span>
                                            <strong><?= e($aps->service_name) ?></strong>
                                        </div>
                                    </td>
                                    <td class="text-center"><?= (int)$aps->duration_minutes ?> min</td>
                                    <td class="text-end"><?= currency($aps->price) ?></td>
                                    <td><?= e(($aps->employee_first_name ?? '') . ' ' . ($aps->employee_last_name ?? '')) ?: '-' ?></td>
                                </tr>
                            <?php endforeach; ?>
                            <tr class="table-active">
                                <td><strong>Total</strong></td>
                                <td class="text-center">
                                    <strong><?= array_sum(array_map(fn($s) => (int)$s->duration_minutes, $appointmentServices)) ?> min</strong>
                                </td>
                                <td class="text-end">
                                    <strong class="text-gold"><?= currency(array_sum(array_map(fn($s) => (float)$s->price, $appointmentServices))) ?></strong>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <?php if (!empty($invoices)): ?>
            <div class="glass-card p-0 mt-4">
                <div class="card-header">
                    <div class="card-header-left">
                        <i class="fas fa-file-invoice card-icon"></i>
                        <h6 class="card-title">Invoices</h6>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-dark table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Invoice #</th>
                                    <th>Date</th>
                                    <th class="text-end">Total</th>
                                    <th>Status</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($invoices as $inv): ?>
                                    <tr>
                                        <td><strong><?= e($inv->invoice_number ?? 'N/A') ?></strong></td>
                                        <td><?= formatDateTime($inv->created_at) ?></td>
                                        <td class="text-end"><?= currency($inv->total ?? 0) ?></td>
                                        <td>
                                            <span class="badge bg-<?= statusBadge($inv->status ?? 'pending') ?>">
                                                <?= e(ucfirst($inv->status ?? 'pending')) ?>
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <a href="<?= url('invoices/show/' . $inv->id) ?>" class="btn btn-sm btn-outline-info" title="View Invoice">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>

    <div class="col-lg-4">
        <div class="glass-card p-0">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-tasks card-icon"></i>
                    <h6 class="card-title">Status Timeline</h6>
                </div>
            </div>
            <div class="card-body">
                <?php
                $statusFlow = ['pending', 'confirmed', 'checked_in', 'in_progress', 'completed'];
                $currentIdx = array_search($appointment->status, $statusFlow);
                if ($currentIdx === false) {
                    $currentIdx = -1;
                }
                ?>
                <ul class="list-unstyled mb-0">
                    <?php foreach ($statusFlow as $i => $status): ?>
                        <li class="mb-3 <?= $i > $currentIdx ? 'text-muted' : '' ?>">
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-circle d-flex align-items-center justify-content-center"
                                     style="width:36px;height:36px;background:<?= $i <= $currentIdx ? 'var(--gold)' : 'var(--bg-primary)' ?>;border:2px solid <?= $i <= $currentIdx ? 'var(--gold)' : 'var(--border-color)' ?>;flex-shrink:0;">
                                    <?php if ($i < $currentIdx): ?>
                                        <i class="fas fa-check text-dark"></i>
                                    <?php elseif ($i === $currentIdx): ?>
                                        <i class="fas fa-circle text-dark" style="font-size:10px;"></i>
                                    <?php else: ?>
                                        <i class="far fa-circle"></i>
                                    <?php endif; ?>
                                </div>
                                <div>
                                    <strong><?= e(ucwords(str_replace('_', ' ', $status))) ?></strong>
                                    <?php if ($i === $currentIdx): ?>
                                        <span class="badge bg-gold ms-2">Current</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>

        <?php if (can('appointments_edit') && in_array($appointment->status, ['pending', 'confirmed', 'checked_in', 'in_progress'])): ?>
            <div class="glass-card p-0 mt-4">
                <div class="card-header">
                    <div class="card-header-left">
                        <i class="fas fa-arrow-right card-icon"></i>
                        <h6 class="card-title">Quick Actions</h6>
                    </div>
                </div>
                <div class="card-body">
                    <?php
                    $nextActions = [
                        'pending' => ['confirmed' => 'Confirm'],
                        'confirmed' => ['checked_in' => 'Check In'],
                        'checked_in' => ['in_progress' => 'Start Service'],
                        'in_progress' => ['completed' => 'Mark Completed'],
                    ];
                    $actions = $nextActions[$appointment->status] ?? [];
                    ?>
                    <?php foreach ($actions as $nextStatus => $label): ?>
                        <form method="POST" action="<?= url('appointments/status/' . $appointment->id) ?>" class="mb-2">
                            <?= csrf_field() ?>
                            <input type="hidden" name="status" value="<?= $nextStatus ?>">
                            <button type="submit" class="btn btn-gold w-100">
                                <i class="fas fa-arrow-right me-1"></i><?= e($label) ?>
                            </button>
                        </form>
                    <?php endforeach; ?>
                    <form method="POST" action="<?= url('appointments/status/' . $appointment->id) ?>">
                        <?= csrf_field() ?>
                        <input type="hidden" name="status" value="cancelled">
                        <button type="submit" class="btn btn-outline-danger w-100" onclick="return confirm('Are you sure?')">
                            <i class="fas fa-times me-1"></i>Cancel Appointment
                        </button>
                    </form>
                </div>
            </div>
        <?php endif; ?>

        <div class="glass-card p-0 mt-4">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-link card-icon"></i>
                    <h6 class="card-title">Linked Records</h6>
                </div>
            </div>
            <div class="card-body">
                <?php if (!empty($invoices)): ?>
                    <a href="<?= url('invoices/show/' . $invoices[0]->id) ?>" class="btn btn-sm btn-outline-info w-100 mb-2">
                        <i class="fas fa-file-invoice me-1"></i>View Invoice
                    </a>
                <?php endif; ?>
                <a href="<?= url('customers/show/' . $appointment->customer_id) ?>" class="btn btn-sm btn-outline-gold w-100 mb-2">
                    <i class="fas fa-user me-1"></i>View Customer Profile
                </a>
                <?php if (can('appointments_edit')): ?>
                    <a href="<?= url('appointments/edit/' . $appointment->id) ?>" class="btn btn-sm btn-outline-gold w-100">
                        <i class="fas fa-edit me-1"></i>Edit Appointment
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
