@extends('layouts.app')

@section('title', 'Customer — ' . ($customer->name ?? 'Details'))

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .page-header .back-btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        transition: all var(--transition);
        text-decoration: none;
    }

    .page-header .back-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; }

    .customer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1.5rem;
    }

    .card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .card-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-primary);
    }

    .card-title i { color: var(--accent); }

    /* Forms */
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .form-group { display: flex; flex-direction: column; margin-bottom: 1rem; }

    .form-group label {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.375rem;
    }

    .form-control {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.875rem;
        outline: none;
        transition: border-color var(--transition);
        width: 100%;
    }

    .form-control:focus { border-color: var(--accent); }
    .form-control::placeholder { color: var(--text-muted); }

    textarea.form-control { resize: vertical; min-height: 80px; }

    select.form-control {
        appearance: none;
        padding-right: 2rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236a6a8e' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
    }

    .form-error {
        font-size: 0.75rem;
        color: var(--danger);
        margin-top: 0.25rem;
    }

    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        background: var(--accent);
        color: #fff;
        border: 1px solid var(--accent);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 500;
        font-family: inherit;
        text-decoration: none;
        cursor: pointer;
        transition: opacity var(--transition);
    }

    .btn-primary:hover { opacity: 0.9; }

    .btn-danger {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        background: var(--danger);
        color: #fff;
        border: 1px solid var(--danger);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: opacity var(--transition);
    }

    .btn-danger:hover { opacity: 0.9; }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: all var(--transition);
    }

    .btn-outline:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

    /* Stats grid */
    .stats-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .stat-tile {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 0.875rem;
    }

    .stat-tile .stat-label {
        font-size: 0.7rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: block;
        margin-bottom: 0.375rem;
    }

    .stat-tile .stat-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .stat-tile.full-span { grid-column: 1 / -1; }

    /* Order history table */
    .order-history-table {
        width: 100%;
        border-collapse: collapse;
    }

    .order-history-table th {
        text-align: left;
        padding: 0.625rem 0.75rem;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .order-history-table td {
        padding: 0.75rem;
        font-size: 0.85rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
    }

    .order-history-table tr:last-child td { border-bottom: none; }
    .order-history-table tbody tr:hover { background: var(--bg-hover); }

    .order-id {
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: var(--accent);
        font-size: 0.8rem;
        text-decoration: none;
    }

    .badge-status {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.55rem;
        border-radius: 20px;
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .badge-pending { background: rgba(255, 165, 2, 0.15); color: #ffa502; }
    .badge-confirmed { background: rgba(16, 191, 255, 0.15); color: #10BFFF; }
    .badge-processing { background: rgba(0, 180, 216, 0.15); color: #00b4d8; }
    .badge-shipped { background: rgba(0, 119, 182, 0.15); color: #0077b6; }
    .badge-delivered { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }
    .badge-completed { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }
    .badge-cancelled { background: rgba(99, 110, 114, 0.15); color: #636e72; }

    /* Banners */
    .status-banner {
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
    }

    .status-banner.blocked {
        background: rgba(255, 71, 87, 0.08);
        border: 1px solid rgba(255, 71, 87, 0.35);
        color: #ff6b7a;
    }

    .status-banner.active {
        background: rgba(0, 212, 170, 0.08);
        border: 1px solid rgba(0, 212, 170, 0.35);
        color: #00d4aa;
    }

    .status-banner i { font-size: 1.15rem; margin-top: 0.1rem; }
    .status-banner .banner-title { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.25rem; }
    .status-banner .banner-reason { font-size: 0.8rem; color: var(--text-secondary); }

    /* Risk indicator */
    .risk-bar {
        width: 100%;
        height: 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        overflow: hidden;
        margin: 0.625rem 0;
    }

    .risk-fill {
        height: 100%;
        transition: width var(--transition);
    }

    .risk-low { background: #00d4aa; }
    .risk-medium { background: #ffa502; }
    .risk-high { background: #ff4757; }

    .risk-label {
        display: flex;
        justify-content: space-between;
        font-size: 0.825rem;
    }

    .risk-label .score { font-weight: 700; color: var(--text-primary); }

    .flash-message {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    .flash-success {
        background: rgba(0, 212, 170, 0.1);
        border: 1px solid var(--success);
        color: var(--success);
    }

    .flash-error {
        background: rgba(255, 71, 87, 0.1);
        border: 1px solid var(--danger);
        color: var(--danger);
    }

    .empty-mini {
        padding: 1.5rem;
        text-align: center;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    @media (max-width: 960px) {
        .customer-grid { grid-template-columns: 1fr; }
        .form-row { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <a href="{{ route('inventory.customers.index') }}" class="back-btn"><i class="fas fa-arrow-left"></i></a>
        <h1>{{ $customer->name ?? 'Customer' }}</h1>
    </div>

    @if(session('success'))
        <div class="flash-message flash-success">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('error'))
        <div class="flash-message flash-error">
            <i class="fas fa-exclamation-circle"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    @if($errors->any())
        <div class="flash-message flash-error">
            <i class="fas fa-exclamation-circle"></i>
            <div>
                <strong>Please fix the following:</strong>
                <ul style="margin:0.25rem 0 0 1rem;padding:0;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    {{-- Dedup banner: another rep contacted this customer recently. --}}
    @if(!empty($recentContactWarning))
        <div style="background:rgba(255,159,67,0.08); border:1px solid rgba(255,159,67,0.35); color:#cc7a00; padding:0.85rem 1.1rem; border-radius:var(--radius-md); margin-bottom:1rem; display:flex; gap:0.75rem; align-items:flex-start;">
            <i class="fas fa-triangle-exclamation" style="font-size:1.1rem; margin-top:0.15rem;"></i>
            <div style="flex:1; font-size:0.9rem;">
                <strong>Heads up — {{ $recentContactWarning['by'] }}</strong> already contacted this customer
                <strong>{{ $recentContactWarning['when']->diffForHumans() }}</strong>
                via <strong>{{ ucfirst($recentContactWarning['channel'] ?? '—') }}</strong>.
                @if(!empty($recentContactWarning['outcome']))
                    <div style="margin-top:0.3rem; color:var(--text-secondary, #50575e); font-style:italic;">
                        &ldquo;{{ \Illuminate\Support\Str::limit($recentContactWarning['outcome'], 200) }}&rdquo;
                    </div>
                @endif
                <div style="margin-top:0.35rem; font-size:0.78rem;">Avoid double-contacting unless this is a different conversation.</div>
            </div>
        </div>
    @endif

    {{-- Contact status card --}}
    @php
        $statusOptions = $contactStatusOptions ?? [];
        $currentStatusKey = $customer->contact_status ?: 'pending';
        $currentStatus = $statusOptions[$currentStatusKey] ?? ['label' => 'Pending', 'color' => '#6c7781'];
        $followUpDue = $customer->next_follow_up_at && $customer->next_follow_up_at->lte(now()->addDay());
    @endphp
    <div class="card" style="margin-bottom:1.25rem;">
        <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap;">
            <div style="flex:1; min-width:260px;">
                <div style="display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem;">
                    <i class="fas fa-headset" style="color:var(--accent);"></i>
                    <h3 class="card-title" style="margin:0; border:none; padding:0;">Contact Tracking</h3>
                    <span style="display:inline-flex; align-items:center; gap:0.35rem; padding:0.18rem 0.6rem; border-radius:999px; font-size:0.72rem; font-weight:600;
                                 background:{{ $currentStatus['color'] }}1f; color:{{ $currentStatus['color'] }};">
                        <span style="width:6px; height:6px; border-radius:50%; background:{{ $currentStatus['color'] }};"></span>
                        {{ $currentStatus['label'] }}
                    </span>
                </div>

                <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0.85rem; font-size:0.85rem; color:var(--text-secondary,#50575e);">
                    <div>
                        <div style="text-transform:uppercase; font-size:0.7rem; letter-spacing:0.05em; color:var(--text-muted);">Last contacted</div>
                        @if($customer->last_contacted_at)
                            <div style="color:var(--text-primary); font-weight:600;">{{ $customer->last_contacted_at->diffForHumans() }}</div>
                            <div style="font-size:0.78rem;">
                                @if($customer->last_contact_channel)
                                    via <strong>{{ ucfirst($customer->last_contact_channel) }}</strong>
                                @endif
                                @if($customer->lastContactedByStaff && optional($customer->lastContactedByStaff->user)->name)
                                    by {{ $customer->lastContactedByStaff->user->name }}
                                @endif
                            </div>
                        @else
                            <div style="color:var(--text-muted);">Never</div>
                        @endif
                    </div>

                    <div>
                        <div style="text-transform:uppercase; font-size:0.7rem; letter-spacing:0.05em; color:var(--text-muted);">Next follow-up</div>
                        @if($customer->next_follow_up_at)
                            <div style="color:{{ $followUpDue ? '#ff9f43' : 'var(--text-primary)' }}; font-weight:600;">
                                {{ $customer->next_follow_up_at->format('M j, Y') }}
                                @if($followUpDue) <span style="font-size:0.7rem; background:rgba(255,159,67,0.15); color:#ff9f43; padding:0.1rem 0.45rem; border-radius:4px;">Due</span> @endif
                            </div>
                            <div style="font-size:0.78rem;">{{ $customer->next_follow_up_at->diffForHumans() }}</div>
                            <form method="POST" action="{{ route('inventory.customers.follow-up.clear', $customer->id) }}" style="display:inline;">
                                @csrf
                                <button type="submit" style="background:none; border:none; color:var(--accent); font-size:0.75rem; cursor:pointer; padding:0; margin-top:0.25rem;">Clear</button>
                            </form>
                        @else
                            <div style="color:var(--text-muted);">None scheduled</div>
                        @endif
                    </div>

                    @if($customer->last_contact_outcome)
                        <div style="grid-column:1/-1;">
                            <div style="text-transform:uppercase; font-size:0.7rem; letter-spacing:0.05em; color:var(--text-muted);">Last outcome</div>
                            <div style="font-style:italic; color:var(--text-primary); font-size:0.85rem;">&ldquo;{{ $customer->last_contact_outcome }}&rdquo;</div>
                        </div>
                    @endif
                </div>
            </div>

            <div style="display:flex; flex-direction:column; gap:0.4rem; min-width:200px;">
                <button type="button" class="btn btn-primary" onclick="document.getElementById('recordContactForm').style.display='block'; this.style.display='none';">
                    <i class="fas fa-circle-check"></i> Record Contact
                </button>

                <form method="POST" action="{{ route('inventory.customers.contact-status', $customer->id) }}">
                    @csrf
                    <select name="contact_status" class="form-control" style="font-size:0.82rem;" onchange="this.form.submit()">
                        @foreach($statusOptions as $key => $opt)
                            <option value="{{ $key }}" {{ $currentStatusKey === $key ? 'selected' : '' }}>{{ $opt['label'] }}</option>
                        @endforeach
                    </select>
                </form>
            </div>
        </div>

        {{-- Inline "Record Contact" form (hidden by default) --}}
        <form id="recordContactForm" method="POST" action="{{ route('inventory.customers.contact', $customer->id) }}"
              style="display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border);">
            @csrf
            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:0.75rem;">
                <div class="form-group">
                    <label style="font-size:0.78rem;">Channel</label>
                    <select name="channel" class="form-control" required>
                        <option value="call">Call</option>
                        <option value="email">Email</option>
                        <option value="sms">SMS</option>
                        <option value="whatsapp">WhatsApp</option>
                        <option value="manual">In-person / Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label style="font-size:0.78rem;">Status after this contact</label>
                    <select name="contact_status" class="form-control">
                        <option value="">— keep current —</option>
                        @foreach($statusOptions as $key => $opt)
                            <option value="{{ $key }}">{{ $opt['label'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label style="font-size:0.78rem;">Schedule follow-up (optional)</label>
                    <input type="date" name="next_follow_up_at" class="form-control" min="{{ now()->toDateString() }}">
                </div>
            </div>
            <div class="form-group">
                <label style="font-size:0.78rem;">Outcome / notes</label>
                <textarea name="outcome" class="form-control" rows="2" maxlength="1000" placeholder="What did the customer say? Any next steps?"></textarea>
            </div>
            <div style="display:flex; gap:0.5rem;">
                <button type="submit" class="btn btn-primary"><i class="fas fa-check"></i> Save</button>
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('recordContactForm').style.display='none';">Cancel</button>
            </div>
        </form>
    </div>

    {{-- Contact timeline --}}
    @if(!empty($timeline) && count($timeline) > 0)
        <div class="card" style="margin-bottom:1.25rem;">
            <h3 class="card-title"><i class="fas fa-stream"></i> Contact Timeline</h3>
            <ul style="list-style:none; padding:0; margin:0; border-left:2px solid var(--border); margin-left:0.5rem;">
                @foreach($timeline as $e)
                    <li style="position:relative; padding:0.65rem 0 0.65rem 1.25rem;">
                        <span style="position:absolute; left:-7px; top:0.95rem; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-card);"></span>
                        <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem; flex-wrap:wrap;">
                            <div style="flex:1; min-width:200px;">
                                <div style="font-weight:600; font-size:0.88rem;">
                                    <i class="fas {{ $e['icon'] }}" style="color:var(--accent); margin-right:0.35rem;"></i>
                                    {{ $e['title'] }}
                                </div>
                                @if(!empty($e['detail']))
                                    <div style="font-size:0.82rem; color:var(--text-secondary,#50575e); margin-top:0.2rem;">
                                        {{ \Illuminate\Support\Str::limit(strip_tags($e['detail']), 200) }}
                                    </div>
                                @endif
                                <div style="font-size:0.74rem; color:var(--text-muted); margin-top:0.25rem;">
                                    {{ $e['channel'] }}
                                    @if(!empty($e['by'])) &middot; by {{ $e['by'] }} @endif
                                </div>
                            </div>
                            <div style="font-size:0.75rem; color:var(--text-muted); white-space:nowrap;" title="{{ optional($e['at'])->format('Y-m-d H:i') }}">
                                {{ optional($e['at'])->diffForHumans() }}
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="customer-grid">
        {{-- LEFT COLUMN --}}
        <div>
            {{-- Profile Edit --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-user"></i> Profile</h3>
                <form method="POST" action="{{ route('inventory.customers.update', $customer->id) }}">
                    @csrf
                    @method('PUT')

                    <div class="form-row">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $customer->name) }}" placeholder="Full name">
                            @error('name') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $customer->email) }}" placeholder="customer@example.com">
                            @error('email') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="text" name="phone" class="form-control" value="{{ old('phone', $customer->phone) }}" placeholder="+234...">
                            @error('phone') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group">
                            <label>Company</label>
                            <input type="text" name="company" class="form-control" value="{{ old('company', $customer->company) }}" placeholder="Company name">
                            @error('company') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Address</label>
                        <input type="text" name="address" class="form-control" value="{{ old('address', $customer->address) }}" placeholder="Street address">
                        @error('address') <div class="form-error">{{ $message }}</div> @enderror
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>City</label>
                            <input type="text" name="city" class="form-control" value="{{ old('city', $customer->city) }}" placeholder="City">
                            @error('city') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group">
                            <label>State</label>
                            <input type="text" name="state" class="form-control" value="{{ old('state', $customer->state) }}" placeholder="State / Province">
                            @error('state') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Country</label>
                            <input type="text" name="country" class="form-control" value="{{ old('country', $customer->country) }}" placeholder="NG" maxlength="2" style="text-transform:uppercase;">
                            @error('country') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group">
                            <label>Tag</label>
                            <select name="tag" class="form-control">
                                @php $currentTag = old('tag', $customer->tag ?? 'new'); @endphp
                                <option value="new" {{ $currentTag === 'new' ? 'selected' : '' }}>New</option>
                                <option value="regular" {{ $currentTag === 'regular' ? 'selected' : '' }}>Regular</option>
                                <option value="vip" {{ $currentTag === 'vip' ? 'selected' : '' }}>VIP</option>
                                <option value="flagged" {{ $currentTag === 'flagged' ? 'selected' : '' }}>Flagged</option>
                            </select>
                            @error('tag') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Notes</label>
                        <textarea name="notes" class="form-control" rows="4" placeholder="Internal notes about this customer...">{{ old('notes', $customer->notes) }}</textarea>
                        @error('notes') <div class="form-error">{{ $message }}</div> @enderror
                    </div>

                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save"></i> Save Changes
                    </button>
                </form>
            </div>

            {{-- Send Message --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-paper-plane"></i> Send Message</h3>
                <form method="POST" action="{{ route('inventory.customers.message', $customer->id) }}" id="sendMessageForm">
                    @csrf

                    <div class="form-row">
                        <div class="form-group">
                            <label>Channel</label>
                            <select name="channel" class="form-control" id="messageChannel">
                                <option value="email" {{ old('channel') === 'email' ? 'selected' : '' }}>Email</option>
                                <option value="sms" {{ old('channel') === 'sms' ? 'selected' : '' }}>SMS</option>
                                <option value="whatsapp" {{ old('channel') === 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                            </select>
                            @error('channel') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group" id="subjectGroup">
                            <label>Subject</label>
                            <input type="text" name="subject" class="form-control" value="{{ old('subject') }}" placeholder="Message subject">
                            @error('subject') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Message</label>
                        <textarea name="body" class="form-control" rows="5" maxlength="2000" placeholder="Write your message here..." required>{{ old('body') }}</textarea>
                        @error('body') <div class="form-error">{{ $message }}</div> @enderror
                    </div>

                    <button type="submit" class="btn-primary">
                        <i class="fas fa-paper-plane"></i> Send
                    </button>
                </form>
            </div>

            {{-- Order History --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-receipt"></i> Order History</h3>
                @if($customer->orders && $customer->orders->count())
                    <div style="overflow-x:auto;">
                        <table class="order-history-table">
                            <thead>
                                <tr>
                                    <th>Order #</th>
                                    <th>Status</th>
                                    <th>Total</th>
                                    <th>Placed</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($customer->orders as $order)
                                    <tr>
                                        <td>
                                            <a href="{{ route('inventory.orders.show', $order->id) }}" class="order-id">
                                                {{ $order->order_number ?? ('ORD-' . str_pad($order->id, 5, '0', STR_PAD_LEFT)) }}
                                            </a>
                                        </td>
                                        <td>
                                            <span class="badge-status badge-{{ $order->status ?? 'pending' }}">
                                                {{ ucfirst($order->status ?? 'pending') }}
                                            </span>
                                        </td>
                                        <td>&#8358;{{ number_format($order->total ?? 0, 2) }}</td>
                                        <td>{{ $order->created_at ? $order->created_at->format('M d, Y') : '—' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-mini">
                        <i class="fas fa-box-open" style="font-size:1.5rem;color:var(--accent);opacity:0.5;display:block;margin-bottom:0.5rem;"></i>
                        No orders yet
                    </div>
                @endif
            </div>
        </div>

        {{-- RIGHT COLUMN --}}
        <div>
            {{-- Stats --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-chart-bar"></i> Stats</h3>
                <div class="stats-list">
                    <div class="stat-tile">
                        <span class="stat-label">Total Orders</span>
                        <span class="stat-value">{{ number_format($customer->total_orders ?? 0) }}</span>
                    </div>
                    <div class="stat-tile">
                        <span class="stat-label">Completed</span>
                        <span class="stat-value">{{ number_format($customer->completed_orders ?? 0) }}</span>
                    </div>
                    <div class="stat-tile">
                        <span class="stat-label">Cancelled</span>
                        <span class="stat-value">{{ number_format($customer->cancelled_orders ?? 0) }}</span>
                    </div>
                    <div class="stat-tile">
                        <span class="stat-label">Total Spent</span>
                        <span class="stat-value">&#8358;{{ number_format($customer->total_spent ?? 0, 2) }}</span>
                    </div>
                    <div class="stat-tile">
                        <span class="stat-label">First Order</span>
                        <span class="stat-value" style="font-size:0.9rem;">{{ $customer->first_order_at?->format('M d, Y') ?? '—' }}</span>
                    </div>
                    <div class="stat-tile">
                        <span class="stat-label">Last Order</span>
                        <span class="stat-value" style="font-size:0.9rem;">{{ $customer->last_order_at?->format('M d, Y') ?? '—' }}</span>
                    </div>
                </div>
            </div>

            {{-- Risk Score --}}
            @isset($risk)
            @php
                $bandClass = $risk['band'] === 'high' ? 'danger' : ($risk['band'] === 'medium' ? 'warning' : 'success');
                $bandColor = $risk['band'] === 'high' ? 'var(--danger)' : ($risk['band'] === 'medium' ? 'var(--warning)' : 'var(--success)');
            @endphp
            <div class="card">
                <h3 class="card-title"><i class="fas fa-gauge-high"></i> Risk Score</h3>
                <div style="display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;">
                    <div style="width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:{{ $bandColor }}22;border:3px solid {{ $bandColor }};">
                        <strong style="font-size:1.5rem;color:{{ $bandColor }};">{{ $risk['score'] }}</strong>
                    </div>
                    <div>
                        <div style="text-transform:uppercase;letter-spacing:0.5px;font-size:0.7rem;color:var(--text-muted);">Risk Band</div>
                        <div style="font-size:1.15rem;font-weight:700;color:{{ $bandColor }};">{{ ucfirst($risk['band']) }}</div>
                        <div style="font-size:0.8rem;color:var(--text-muted);">out of 100</div>
                    </div>
                </div>
                @if(!empty($risk['signals']))
                    <ul style="list-style:none;padding:0;margin:0 0 0.75rem 0;">
                        @foreach($risk['signals'] as $signal)
                            <li style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.4rem 0;border-bottom:1px solid var(--border-light);font-size:0.85rem;color:var(--text-secondary);">
                                <i class="fas fa-triangle-exclamation" style="color:{{ $bandColor }};margin-top:3px;"></i>
                                <span>{{ $signal }}</span>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p style="font-size:0.85rem;color:var(--text-muted);margin:0 0 0.75rem 0;">No risk signals detected.</p>
                @endif
                <form method="POST" action="{{ route('inventory.customers.recompute-risk', $customer->id) }}" style="margin:0;">
                    @csrf
                    <button type="submit" class="btn btn-outline" style="width:100%;">
                        <i class="fas fa-arrows-rotate"></i> Recompute Risk
                    </button>
                </form>
            </div>
            @endisset

            {{-- Status Card --}}
            <div class="card">
                <h3 class="card-title"><i class="fas fa-shield-halved"></i> Status</h3>
                @if($customer->is_blocked)
                    <div class="status-banner blocked">
                        <i class="fas fa-ban"></i>
                        <div>
                            <span class="banner-title">Customer Blocked</span>
                            <span class="banner-reason">{{ $customer->block_reason ?? 'No reason provided.' }}</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('inventory.customers.unblock', $customer->id) }}" data-confirm="This customer will be able to place orders again." data-confirm-title="Unblock Customer?" data-confirm-button="Unblock">
                        @csrf
                        <button type="submit" class="btn-outline" style="width:100%;justify-content:center;">
                            <i class="fas fa-unlock"></i> Unblock Customer
                        </button>
                    </form>
                @else
                    <div class="status-banner active">
                        <i class="fas fa-check-circle"></i>
                        <div>
                            <span class="banner-title">Active</span>
                            <span class="banner-reason">This customer can place orders normally.</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('inventory.customers.block', $customer->id) }}" data-confirm="This customer will no longer be able to place orders." data-confirm-title="Block Customer?" data-confirm-type="danger" data-confirm-button="Block">
                        @csrf
                        <div class="form-group">
                            <label>Reason</label>
                            <textarea name="reason" class="form-control" rows="3" placeholder="Why are you blocking this customer?" required></textarea>
                            @error('reason') <div class="form-error">{{ $message }}</div> @enderror
                        </div>
                        <button type="submit" class="btn-danger" style="width:100%;justify-content:center;">
                            <i class="fas fa-ban"></i> Block Customer
                        </button>
                    </form>
                @endif
            </div>

            {{-- Risk Score --}}
            @if(($customer->risk_score ?? 0) > 0)
                @php
                    $risk = (int) $customer->risk_score;
                    $riskClass = $risk >= 70 ? 'risk-high' : ($risk >= 40 ? 'risk-medium' : 'risk-low');
                    $riskText = $risk >= 70 ? 'High Risk' : ($risk >= 40 ? 'Medium Risk' : 'Low Risk');
                @endphp
                <div class="card">
                    <h3 class="card-title"><i class="fas fa-triangle-exclamation"></i> Risk</h3>
                    <div class="risk-label">
                        <span>{{ $riskText }}</span>
                        <span class="score">{{ $risk }}/100</span>
                    </div>
                    <div class="risk-bar">
                        <div class="risk-fill {{ $riskClass }}" style="width: {{ min(100, $risk) }}%;"></div>
                    </div>
                    <div style="font-size:0.78rem;color:var(--text-muted);">
                        Based on order history, disputes, and reported issues.
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script>
    (function () {
        const channelSelect = document.getElementById('messageChannel');
        const subjectGroup = document.getElementById('subjectGroup');

        function toggleSubject() {
            if (!channelSelect || !subjectGroup) return;
            subjectGroup.style.display = channelSelect.value === 'email' ? '' : 'none';
        }

        channelSelect?.addEventListener('change', toggleSubject);
        toggleSubject();
    })();
</script>
@endpush