@extends('layouts.admin')

@section('styles')
<style>
    /* Avoid theme .timeline (50% date column) — use crm-activity-* only */
    .crm-contact-layout { align-items: stretch; }
    .crm-main-panel { min-height: 70vh; }
    .crm-stat-card {
        border: 1px solid #eef2f7;
        border-radius: 8px;
        padding: 16px;
        background: #fff;
        height: 100%;
    }
    .crm-stat-card .value { font-size: 1.5rem; font-weight: 700; margin-bottom: 0; }
    .crm-stat-card .label { color: #0d6efd; font-weight: 600; }
    .crm-purchase-card {
        border: 1px solid #eef2f7;
        border-radius: 8px;
        padding: 14px;
        height: 100%;
        background: #fff;
    }
    .crm-profile-table td { vertical-align: middle; }
    .crm-tab-table { width: 100% !important; }

    .customer-activity {
        width: 100%;
        max-height: 78vh;
        height: 78vh;
        overflow-y: auto;
        padding: 4px 8px 8px 4px;
        background: #fff;
    }
    .crm-activity-date {
        font-size: 13px;
        font-weight: 700;
        color: #666;
        margin: 16px 0 10px;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    .crm-activity-timeline {
        position: relative;
        padding-left: 44px;
        margin: 0;
        width: 100%;
        display: block !important;
        border-collapse: separate !important;
        table-layout: auto !important;
    }
    .crm-activity-timeline::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #d9e2ec;
    }
    .crm-activity-item {
        position: relative;
        margin-bottom: 18px;
        display: block !important;
        width: 100%;
    }
    .crm-activity-item:before { display: none !important; content: none !important; }
    .crm-activity-icon {
        position: absolute;
        left: -44px;
        top: 0;
        width: 36px;
        height: 36px;
        border: 1px solid #b7d7f0;
        border-radius: 50%;
        background: #fff;
        color: #2d9cdb;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .crm-activity-icon i {
        font-size: 15px;
        color: #2d9cdb;
        line-height: 1;
    }
    .crm-activity-content {
        padding-left: 4px;
        width: 100%;
    }
    .crm-activity-title {
        font-size: 14px;
        font-weight: 700;
        color: #222;
        line-height: 1.3;
    }
    .crm-activity-desc {
        font-size: 13px;
        color: #666;
        margin-top: 3px;
        line-height: 1.4;
        word-break: break-word;
    }
    .crm-activity-desc a { color: #0d6efd; text-decoration: underline; }
    .crm-activity-time {
        font-size: 12px;
        color: #999;
        margin-top: 3px;
    }
    #activityLoader {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 0;
        font-weight: 600;
        color: #666;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    @include('elements.admin-breadcrumb')
    @include('elements.alert')

    <div class="row crm-contact-layout">
        <div class="col-xl-9 col-lg-8">
            <div class="card mb-3">
                <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h4 class="mb-1">{{ $contact->full_name }} <span class="text-muted fs-5">({{ $contact->id }})</span></h4>
                        <div class="text-muted">
                            <i class="fa fa-phone"></i> {{ $contact->mobile }}
                            @if($contact->email) &nbsp;|&nbsp; <i class="fa fa-envelope"></i> {{ $contact->email }} @endif
                        </div>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        @can('admin.crm-followup.create')
                            <a href="{{ route('admin.crm-followup.create', ['contact_id' => $contact->id]) }}" class="btn btn-info btn-sm">
                                <i class="fa fa-calendar-plus"></i> Add Followup
                            </a>
                        @endcan
                        @can('admin.crm-ticket.create')
                            <a href="{{ route('admin.crm-ticket.create', ['contact_id' => $contact->id]) }}" class="btn btn-warning btn-sm">
                                <i class="fa fa-ticket-alt"></i> Add Ticket
                            </a>
                        @endcan
                        @can('admin.crm-contact.edit')
                            <a href="{{ route('admin.crm-contact.edit', $contact->id) }}" class="btn btn-primary btn-sm">
                                <i class="fa fa-edit"></i> Edit
                            </a>
                            <button type="button" class="btn btn-success btn-sm" id="btnMakeCall" data-number="{{ $contact->mobile }}">
                                <i class="fa fa-phone"></i> Call
                            </button>
                        @endcan
                        <a href="{{ route('admin.crm-contact.index') }}" class="btn btn-light btn-sm">Back</a>
                    </div>
                </div>
                <div class="card-header card-header-tabs-line pt-0 border-0">
                    <ul class="nav nav-tabs nav-bordered" role="tablist">
                        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-profile" type="button">Profile</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-purchases" type="button">Purchases</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-learning" type="button">Learning Progress</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-workshops" type="button">Workshops</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-exams" type="button">Exams</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-practicals" type="button">Practicals</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-payments" type="button">Payments</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-leads" type="button">Leads</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-tickets" type="button">Tickets</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-followups" type="button">Followups</button></li>
                        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-calls" type="button">Call Logs</button></li>
                    </ul>
                </div>
            </div>

            <div class="card crm-main-panel">
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab-profile">
                            @include('admin.crm.contact.partials.profile')
                        </div>

                        <div class="tab-pane fade" id="tab-purchases">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblPurchases"
                                   data-url="{{ route('admin.crm-contact.purchases-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Course</th><th>Amount</th><th>Status</th><th>Created</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-learning">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblLearning"
                                   data-url="{{ route('admin.crm-contact.topic-status-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Topic</th><th>Type</th><th>Status</th><th>Course</th><th>Start</th><th>Completed</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-workshops">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblWorkshops"
                                   data-url="{{ route('admin.crm-contact.workshops-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Workshop</th><th>Name</th><th>Email</th><th>Phone</th><th>Created</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-exams">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblExams"
                                   data-url="{{ route('admin.crm-contact.exams-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Detail</th><th>Score</th><th>Status</th><th>Created</th><th>Action</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-practicals">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblPracticals"
                                   data-url="{{ route('admin.crm-contact.practicals-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Session</th><th>Status</th><th>Created</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-payments">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblPayments"
                                   data-url="{{ route('admin.crm-contact.payments-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Amount</th><th>Status</th><th>Created</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-leads">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblLeads"
                                   data-url="{{ route('admin.crm-contact.leads-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Source</th><th>Name</th><th>Email</th><th>Phone</th><th>Created</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-tickets">
                            <div class="mb-2 text-end">
                                @can('admin.crm-ticket.create')
                                <a href="{{ route('admin.crm-ticket.create', ['contact_id' => $contact->id]) }}" class="btn btn-sm btn-warning">
                                    <i class="fa fa-plus"></i> Add Ticket
                                </a>
                                @endcan
                            </div>
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblTickets"
                                   data-url="{{ route('admin.crm-contact.tickets-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Ticket</th><th>Category</th><th>Priority</th><th>Status</th><th>Created</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-followups">
                            <div class="mb-2 text-end">
                                @can('admin.crm-followup.create')
                                <a href="{{ route('admin.crm-followup.create', ['contact_id' => $contact->id]) }}" class="btn btn-sm btn-info">
                                    <i class="fa fa-plus"></i> Add Followup
                                </a>
                                @endcan
                            </div>
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblFollowups"
                                   data-url="{{ route('admin.crm-contact.followups-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Notes</th><th>Mode</th><th>Reminder</th><th>Status</th><th>Created</th><th>Action</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="tab-calls">
                            <table class="table table-striped crm-tab-table crm-related-table" id="tblCalls"
                                   data-url="{{ route('admin.crm-contact.call-logs-data', $contact->id) }}">
                                <thead><tr><th>ID</th><th>Direction</th><th>Status</th><th>Agent</th><th>Duration</th><th>Started</th></tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-4">
            <div class="card h-100">
                <div class="card-header"><strong>Customer Activity</strong></div>
                <div class="card-body">
                    <div class="customer-activity" id="customerActivity"
                         data-url="{{ route('admin.crm-contact.activity-logs', $contact->id) }}">
                        <div id="activityList"></div>
                        <div id="activityLoader" class="text-center py-2" style="display:none;">
                            <div class="spinner-border spinner-border-sm text-primary"></div>
                            <span class="ms-1">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    window.CRM_MAKE_CALL_URL = @json(route('admin.crm-contact.make-call'));
</script>
<script src="{{ asset('js/custom/admin-crm-contact.js') }}?v={{ time() }}"></script>
@endsection