@extends('backEnd.layouts.master')
@section('title','Order Activities')

@push('styles')
<style>
.oa-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #111827;
}
.oa-page-title i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.oa-filter-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.oa-filter-card .form-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}
.oa-btn-filter {
    background: #2563eb;
    border-color: #2563eb;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 18px;
}
.oa-btn-filter:hover { background: #1d4ed8; border-color: #1d4ed8; }
.oa-btn-reset {
    background: #6b7280;
    border-color: #6b7280;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 16px;
}
.oa-btn-reset:hover { background: #4b5563; border-color: #4b5563; color: #fff; }
.oa-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.oa-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
.oa-table thead th {
    background: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
    padding: 12px 14px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.oa-table tbody td {
    border-bottom: 1px solid #f1f5f9;
    padding: 14px;
    vertical-align: middle;
}
.oa-table tbody tr:nth-child(even) { background: #fafafa; }
.oa-table tbody tr:nth-child(odd)  { background: #fff; }
.oa-table tbody tr:hover { background: #f0fdf4 !important; }
.oa-date-main { font-weight: 700; color: #111827; font-size: 13px; }
.oa-date-sub { color: #64748b; font-size: 12px; margin-top: 2px; }
.oa-order-link {
    font-weight: 800;
    color: #16a34a;
    text-decoration: none;
    font-size: 14px;
}
.oa-order-link:hover { color: #15803d; text-decoration: underline; }
.oa-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
}
.oa-badge-delivered  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.oa-badge-shipped    { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.oa-badge-returned   { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.oa-badge-cancelled  { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.oa-badge-hold       { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; }
.oa-badge-booked     { background: #ccfbf1; color: #0f766e; border: 1px solid #99f6e4; }
.oa-badge-manual     { background: #cffafe; color: #0e7490; border: 1px solid #a5f3fc; }
.oa-badge-updated    { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
.oa-badge-collected  { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.oa-badge-packed     { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.oa-badge-revert     { background: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; }
.oa-badge-created    { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.oa-badge-status     { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.oa-badge-note       { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.oa-badge-sms        { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.oa-badge-default    { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.oa-content { color: #1f2937; line-height: 1.45; }
.oa-tracking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 8px;
}
.oa-performer {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.oa-performer-customer { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.oa-performer-courier  { background: #0d9488; color: #fff; border: 1px solid #0f766e; }
.oa-performer-staff    { background: #fff; color: #111827; border: 1px solid #d1d5db; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.oa-performer-system   { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.oa-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(22, 163, 74, .35);
    transition: transform .15s, box-shadow .15s;
}
.oa-act-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22, 163, 74, .4);
    color: #fff;
}
.oa-empty {
    padding: 48px 20px;
    text-align: center;
    color: #94a3b8;
}
.oa-empty i { font-size: 42px; opacity: .45; margin-bottom: 12px; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h4 class="oa-page-title mb-0">
            <i class="fas fa-history"></i>
            Order Activities
        </h4>
    </div>

    <div class="oa-filter-card mb-3">
        <div class="card-body py-3 px-3">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-6 col-md-auto">
                    <label class="form-label">From Date</label>
                    <input type="date" name="from_date" value="{{ request('from_date') }}"
                        class="form-control form-control-sm" style="min-width:160px">
                </div>
                <div class="col-6 col-md-auto">
                    <label class="form-label">To Date</label>
                    <input type="date" name="to_date" value="{{ request('to_date') }}"
                        class="form-control form-control-sm" style="min-width:160px">
                </div>
                <div class="col-12 col-md-auto">
                    <label class="form-label">Staff</label>
                    <select name="staff" class="form-select form-select-sm" style="min-width:180px">
                        <option value="">All Staff</option>
                        <option value="__courier__" {{ request('staff')=='__courier__'?'selected':'' }}>Courier (API/Webhook)</option>
                        @foreach($admins as $admin)
                        <option value="{{ $admin->id }}" {{ request('staff')==$admin->id?'selected':'' }}>{{ $admin->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-auto">
                    <label class="form-label">Activity Type</label>
                    <select name="activity_type" class="form-select form-select-sm" style="min-width:210px">
                        <option value="">All Activity Types</option>
                        @foreach($activityTypes as $slug => $label)
                        <option value="{{ $slug }}" @selected(request('activity_type') === $slug)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-auto d-flex gap-2 flex-wrap">
                    <button type="submit" class="btn btn-sm oa-btn-filter">
                        <i class="fas fa-filter me-1"></i>Filter
                    </button>
                    <a href="{{ route('admin.order-activities') }}" class="btn btn-sm oa-btn-reset">
                        <i class="fas fa-sync-alt me-1"></i>Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <div class="oa-panel">
        <div class="table-responsive">
            <table class="oa-table">
                <thead>
                    <tr>
                        <th style="width:150px">Date &amp; Time</th>
                        <th style="width:90px">Order</th>
                        <th style="width:170px">Activity Type</th>
                        <th>Content</th>
                        <th style="width:140px">Performed By</th>
                        <th class="text-center" style="width:80px">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($histories as $h)
                    @php
                        $content = $h->note ?? ('Status has been updated to ' . $h->status_label);
                    @endphp
                    <tr>
                        <td>
                            <div class="oa-date-main">{{ $h->created_at->format('d M Y') }}</div>
                            <div class="oa-date-sub">{{ $h->created_at->format('g:i A') }}</div>
                        </td>
                        <td>
                            @if($h->order)
                            <a href="{{ route('admin.orders.show', $h->order_id) }}" class="oa-order-link">#{{ $h->order->id }}</a>
                            @else
                            <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            <span class="{{ $h->activity_badge_class }}">{{ $h->activity_type_label }}</span>
                        </td>
                        <td>
                            <span class="oa-content">{{ $content }}</span>
                            @if($h->extra_data && !empty($h->extra_data['tracking_code']))
                            <div class="oa-tracking">
                                <i class="fas fa-barcode"></i>{{ $h->extra_data['tracking_code'] }}
                            </div>
                            @endif
                        </td>
                        <td>
                            <span class="{{ $h->performerBadgeClass() }}">{{ $h->performerLabel() }}</span>
                        </td>
                        <td class="text-center">
                            <button type="button" class="oa-act-btn view-activity" data-id="{{ $h->id }}" title="View detail">
                                <i class="fas fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6">
                            <div class="oa-empty">
                                <i class="fas fa-history d-block"></i>
                                No activities found. Courier webhook বা status change হলে এখানে log দেখাবে।
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($histories->hasPages())<div class="p-3 border-top">{{ $histories->links() }}</div>@endif
    </div>
</div>

<div class="modal fade" id="activityModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header py-3 border-0">
                <h6 class="modal-title fw-bold"><i class="fas fa-history me-2 text-success"></i>Activity Detail</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-0" id="activityModalBody">
                <div class="text-center py-4"><div class="spinner-border text-success"></div></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.view-activity').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.dataset.id;
        const modal = new bootstrap.Modal(document.getElementById('activityModal'));
        document.getElementById('activityModalBody').innerHTML = '<div class="text-center py-4"><div class="spinner-border text-success"></div></div>';
        modal.show();

        fetch(`{{ url('admin/order-activities') }}/${id}/detail`, {
            headers: {'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content}
        }).then(r => r.json()).then(d => {
            let extraHtml = '';
            if (d.extra_data && typeof d.extra_data === 'object') {
                extraHtml = '<hr><h6 class="fw-bold text-muted small mb-2">COURIER / EXTRA DATA</h6><table class="table table-sm table-bordered mb-0">';
                for (const [k, v] of Object.entries(d.extra_data)) {
                    const val = typeof v === 'object' ? JSON.stringify(v) : (v ?? '—');
                    extraHtml += `<tr><th class="bg-light" style="width:40%;font-size:12px">${k}</th><td style="font-size:12px">${val}</td></tr>`;
                }
                extraHtml += '</table>';
            }

            const badgeClass = d.activity_badge || 'oa-badge oa-badge-default';

            document.getElementById('activityModalBody').innerHTML = `
            <div class="row g-3 mb-3">
                <div class="col-6"><div class="p-3 bg-light rounded-3"><div class="text-muted small mb-1">Order</div>
                    <a href="/admin/orders/${d.order_id}" class="fw-bold text-success fs-5 text-decoration-none">#${d.order_id}</a></div></div>
                <div class="col-6"><div class="p-3 bg-light rounded-3"><div class="text-muted small mb-1">Activity Type</div>
                    <span class="${badgeClass}">${d.activity_type}</span></div></div>
                <div class="col-6"><div class="p-3 bg-light rounded-3"><div class="text-muted small mb-1">Customer</div>
                    <div class="fw-semibold">${d.customer_name ?? '—'}</div><div class="text-muted">${d.customer_phone ?? ''}</div></div></div>
                <div class="col-6"><div class="p-3 bg-light rounded-3"><div class="text-muted small mb-1">Status</div>
                    <div class="fw-semibold">${d.status_label}</div></div></div>
                <div class="col-6"><div class="p-3 bg-light rounded-3"><div class="text-muted small mb-1">Performed By</div>
                    <span class="oa-performer oa-performer-staff">${d.performed_by}</span></div></div>
                <div class="col-6"><div class="p-3 bg-light rounded-3"><div class="text-muted small mb-1">Date & Time</div>
                    <div class="fw-semibold">${d.created_at}</div></div></div>
                ${d.note ? `<div class="col-12"><div class="p-3 bg-light rounded-3"><div class="text-muted small mb-1">Content</div><div>${d.note}</div></div></div>` : ''}
            </div>${extraHtml}`;
        }).catch(() => {
            document.getElementById('activityModalBody').innerHTML = '<p class="text-danger text-center">Could not load detail.</p>';
        });
    });
});
</script>
@endpush