@extends('layouts.masterbeta')

@section('page-title') 
    Clients | {{ $showclient->name }}
@endsection

@section('breadcrumbs')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ url('/clients') }}" class="text-decoration-none">Clients</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $showclient->name }}</li>
        </ol>
    </nav>
@endsection

@section('content')
<div class="container-fluid px-0">

    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <div class="avatar-circle bg-primary text-white me-3 d-flex justify-content-center align-items-center fw-bold shadow-sm" style="width: 54px; height: 54px; border-radius: 50%; font-size: 1.5rem;">
                {{ substr($showclient->name, 0, 2) }}
            </div>
            <div>
                <h3 class="fw-bold mb-1 text-dark">{{ $showclient->name }}</h3>
                <div class="text-secondary d-flex align-items-center" style="font-size: 0.9rem;">
                    <i class="bi bi-geo-alt-fill text-danger me-1"></i> {{ $showclient->country ?? 'Unknown Location' }}
                    <span class="mx-2">•</span>
                    <i class="bi bi-building me-1"></i> {{ $showclient->company_type ?? 'N/A' }}
                    <span class="mx-2">•</span>
                    @if($showclient->status == 'Live' || $showclient->status == 'active')
                        <span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-check-circle me-1"></i>Active</span>
                    @else
                        <span class="badge bg-warning bg-opacity-10 text-warning"><i class="bi bi-clock me-1"></i>{{ ucfirst($showclient->status) }}</span>
                    @endif
                </div>
            </div>
        </div>
        <div>
            <!-- Button to trigger the Edit modal or go to edit page -->
            <button class="btn btn-primary fw-bold shadow-sm px-4" data-bs-toggle="modal" data-bs-target="#editClientModal">
                <i class="bi bi-pencil-square me-2"></i> Edit Client
            </button>
        </div>
    </div>

    <!-- Main Grid Layout -->
    <div class="row g-4 mb-5">
        
       <!-- COLUMN 1 -->
        <div class="col-lg-4 d-flex flex-column">
            
            <!-- Company Profile -->
            <div class="card border-light-subtle shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
                        <i class="bi bi-info-circle text-primary me-2"></i> Company Profile
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
                            <span class="text-muted small">Industry</span>
                            <span class="fw-medium text-dark">{{ $showclient->industry ?? 'N/A' }}</span>
                        </li>
                        <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
                            <span class="text-muted small">Type</span>
                            <span class="fw-medium text-dark">{{ $showclient->type ?? 'N/A' }}</span>
                        </li>
                        <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
                            <span class="text-muted small">Acquisition</span>
                            <span class="fw-medium text-dark">{{ $showclient->how_we_got_client ?? 'N/A' }}</span>
                        </li>
                        <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
                            <span class="text-muted small">Date Added</span>
                            <span class="fw-medium text-dark">{{ $showclient->created_at ? \Carbon\Carbon::parse($showclient->created_at)->format('d M Y') : 'N/A' }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Primary Contact (Will now stretch automatically) -->
            <div class="card border-light-subtle shadow-sm flex-grow-1">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
                        <i class="bi bi-person-badge text-primary me-2"></i> Primary Contact
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="text-muted small mb-1">Contact Person</div>
                        <div class="fw-bold text-dark">{{ $showclient->contact_person ?? 'N/A' }}</div>
                    </div>
                    <div class="mb-3">
                        <div class="text-muted small mb-1">Email Address</div>
                        <div class="fw-medium text-primary"><a href="mailto:{{ $showclient->email }}" class="text-decoration-none">{{ $showclient->email ?? 'N/A' }}</a></div>
                    </div>
                    <div class="mb-3">
                        <div class="text-muted small mb-1">Phone Number</div>
                        <div class="fw-medium text-dark">{{ $showclient->phone ?? 'N/A' }}</div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="text-muted small mb-1">Skype</div>
                            <div class="fw-medium text-dark">{{ $showclient->skype_name ?? 'N/A' }}</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small mb-1">LinkedIn</div>
                            <div class="fw-medium text-dark">{{ $showclient->linkedin_name ?? 'N/A' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- COLUMN 2 -->
        <div class="col-lg-4">
            
            <!-- Service & Billing -->
            <div class="card border-light-subtle shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
                        <i class="bi bi-wallet2 text-primary me-2"></i> Service & Billing
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="text-muted small mb-2">Subscribed Services</div>
                        <div>
                            @php
                                $services = json_decode($showclient->services, true) ?? [];
                            @endphp
                            @if(count($services) > 0)
                                @foreach($services as $service)
                                    <span class="badge bg-secondary bg-opacity-10 text-secondary border me-1">{{ $service }}</span>
                                @endforeach
                            @else
                                <span class="text-muted small">N/A</span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="text-muted small mb-1">Billing Mode</div>
                            <div class="fw-bold text-dark text-uppercase">{{ $showclient->pay_mode ?? 'N/A' }}</div>
                        </div>
                        <div class="col-6">
                            <div class="text-muted small mb-1">Currency</div>
                            <div class="fw-bold text-dark">{{ $showclient->currency ?? 'N/A' }}</div>
                        </div>
                    </div>
                    
                    <div class="mb-2">
                        <div class="text-muted small mb-1">Message Types</div>
                        <div>
                            @php
                                $msgTypes = json_decode($showclient->message_types, true) ?? [];
                            @endphp
                            @if(count($msgTypes) > 0)
                                @foreach($msgTypes as $type)
                                    <span class="badge bg-info bg-opacity-10 text-info border border-info me-1">{{ $type }}</span>
                                @endforeach
                            @else
                                <span class="text-muted small">N/A</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contract Details -->
            <div class="card border-light-subtle shadow-sm">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
                        <i class="bi bi-file-earmark-text text-primary me-2"></i> Contract Details
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
                            <span class="text-muted small">Contract Type</span>
                            <span class="fw-medium text-dark">{{ $showclient->contract_type ?? 'N/A' }}</span>
                        </li>
                        <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
                            <span class="text-muted small">Auto Renew</span>
                            @if($showclient->contract_auto_renew == 'YES')
                                <span class="badge bg-success">Yes</span>
                            @else
                                <span class="badge bg-secondary">No</span>
                            @endif
                        </li>
                        <li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
                            <span class="text-muted small">Validity (Expiry)</span>
                            @if($showclient->contract_validity && $showclient->contract_validity != '1970-01-01 22:00:00')
                                <span class="fw-medium text-dark">{{ \Carbon\Carbon::parse($showclient->contract_validity)->format('d M Y') }}</span>
                            @else
                                <span class="text-muted small">N/A</span>
                            @endif
                        </li>
                        <li class="list-group-item px-0 py-2 border-0 mt-2 bg-light rounded">
                            <div class="text-muted small mb-1">SMPP Username</div>
                            <div class="fw-bold text-dark font-monospace">{{ $showclient->smpp_username ?? 'N/A' }}</div>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>

        <!-- COLUMN 3 -->
        <div class="col-lg-4">
            
            <!-- Onboarding Progress -->
            <div class="card border-light-subtle shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
                        <i class="bi bi-graph-up text-primary me-2"></i> Onboarding Progress
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="text-muted small fw-bold">Current Stage</div>
                        <div class="badge bg-primary">{{ $showclient->progress_indicator ?? 'N/A' }}</div>
                    </div>
                    
                    @php
                        $score = $showclient->progress_indicator_score ?? 0;
                        $scoreColor = $score >= 100 ? 'bg-success' : ($score >= 50 ? 'bg-primary' : 'bg-warning');
                    @endphp
                    
                    <div class="d-flex justify-content-between align-items-center mt-3 mb-1">
                        <span class="text-muted small">Completion Score</span>
                        <span class="fw-bold text-dark">{{ $score }}%</span>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar {{ $scoreColor }}" role="progressbar" style="width: {{ $score }}%" aria-valuenow="{{ $score }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>

            <!-- Communication Channels -->
            <div class="card border-light-subtle shadow-sm">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
                        <i class="bi bi-chat-dots text-primary me-2"></i> Communications
                    </h6>
                </div>
                <div class="card-body">
                    
                    <!-- Helper Macro for JSON Emails/Phones -->
                    @php
                        function renderBadges($jsonString, $type = 'email') {
                            $items = json_decode($jsonString, true) ?? [];
                            if(count($items) === 0) return '<span class="text-muted small">N/A</span>';
                            $html = '';
                            foreach($items as $item) {
                                $icon = $type == 'email' ? 'bi-envelope' : 'bi-telephone';
                                $html .= '<span class="badge bg-light text-dark border me-1 mb-1"><i class="bi '.$icon.' text-secondary me-1"></i>'.$item.'</span>';
                            }
                            return $html;
                        }
                    @endphp

                    <div class="mb-3">
                        <div class="text-muted small mb-1">Finance Emails</div>
                        <div>{!! renderBadges($showclient->finance_email, 'email') !!}</div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="text-muted small mb-1">Support Emails</div>
                        <div>{!! renderBadges($showclient->support_emails, 'email') !!}</div>
                    </div>

                    <div class="mb-3">
                        <div class="text-muted small mb-1">Rate Emails</div>
                        <div>{!! renderBadges($showclient->rate_emails, 'email') !!}</div>
                    </div>
                    
                    <div class="mb-0">
                        <div class="text-muted small mb-1">Support Phones</div>
                        <div>{!! renderBadges($showclient->support_phones, 'phone') !!}</div>
                    </div>

                </div>
            </div>
            
        </div>
    </div>
    <!-- Tabs Navigation for Additional Records -->
    <div class="card border-light-subtle shadow-sm mt-5 mb-4">
        <div class="card-header bg-white pt-3 pb-0 border-bottom">
            <ul class="nav nav-tabs card-header-tabs" id="clientRecordTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active fw-bold text-dark" id="shortcodes-tab" data-bs-toggle="tab" data-bs-target="#shortcodes-pane" type="button" role="tab">
                        <i class="bi bi-code-square text-primary me-1"></i> Short Codes 
                        <span class="badge bg-primary bg-opacity-10 text-primary ms-1">{{ count($voice_codes) + count($sms_codes) + count($ussd_codes) }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-bold text-dark" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments-pane" type="button" role="tab">
                        <i class="bi bi-wallet2 text-primary me-1"></i> Payments 
                        <span class="badge bg-primary bg-opacity-10 text-primary ms-1">{{ count($recent_payments) }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-bold text-dark" id="files-tab" data-bs-toggle="tab" data-bs-target="#files-pane" type="button" role="tab">
                        <i class="bi bi-file-earmark-arrow-down text-primary me-1"></i> Documents 
                        <span class="badge bg-primary bg-opacity-10 text-primary ms-1">{{ count($showdocuments) }}</span>
                    </button>
                </li>
            </ul>
        </div>

        <div class="card-body bg-light tab-content" id="clientRecordTabsContent">
            
            <!-- TAB 1: SHORT CODES -->
            <div class="tab-pane fade show active" id="shortcodes-pane" role="tabpanel" tabindex="0">
                @php
                    $allCodes = collect($voice_codes)->concat($sms_codes)->concat($ussd_codes);
                @endphp
                
                @if($allCodes->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 bg-white border rounded">
                            <thead class="table-light">
                                <tr style="font-size: 0.8rem;" class="text-secondary text-uppercase">
                                    <th>Type</th>
                                    <th>Shortcode</th>
                                    <th>Network</th>
                                    <th>Status</th>
                                    <th>Expiry Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($allCodes as $code)
                                    <tr>
                                        <td><span class="badge bg-secondary text-uppercase" style="font-size: 0.7rem;">{{ $code->code_type ?? 'N/A' }}</span></td>
                                        <td class="fw-bold text-dark font-monospace">{{ $code->shortcode ?? 'N/A' }}</td>
                                        <td>{{ $code->network ?? 'N/A' }}</td>
                                        <td>
                                            <span class="badge bg-success bg-opacity-10 text-success">{{ $code->status ?? 'Active' }}</span>
                                        </td>
                                        <td class="text-muted small">{{ $code->expiry_date ? \Carbon\Carbon::parse($code->expiry_date)->format('d M Y') : 'N/A' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4 text-muted small">
                        <i class="bi bi-folder2-open fs-4 d-block mb-1"></i> No short codes assigned to this client.
                    </div>
                @endif
            </div>

            <!-- TAB 2: PAYMENTS -->
            <div class="tab-pane fade" id="payments-pane" role="tabpanel" tabindex="0">
                @if(isset($recent_payments) && count($recent_payments) > 0)
                    <div class="table-responsive" style="max-height: 450px; overflow-y: auto;">
                        <table class="table table-hover align-middle mb-0 bg-white border rounded">
                            <thead class="table-light">
                                <tr style="font-size: 0.8rem;" class="text-secondary text-uppercase">
                                    <th>Invoice #</th>
                                    <th>Amount</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recent_payments as $payment)
                                    <tr>
                                        <td class="fw-bold text-dark">{{ $payment->invoice_number ?? 'N/A' }}</td>
                                        <td class="fw-semibold text-success">{{ number_format($payment->invoice_amount ?? 0, 2) }}</td>
                                        <td class="text-muted small">{{ $payment->invoice_date ? \Carbon\Carbon::parse($payment->invoice_date)->format('d M Y') : 'N/A' }}</td>
                                        <td>
                                            <span class="badge bg-info bg-opacity-10 text-info text-uppercase">{{ $payment->invoice_status ?? 'Pending' }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4 text-muted small">
                        <i class="bi bi-wallet fs-4 d-block mb-1"></i> No payment records found.
                    </div>
                @endif
            </div>

            <!-- TAB 3: DOCUMENTS -->
            <div class="tab-pane fade" id="files-pane" role="tabpanel" tabindex="0">
                @if(isset($showdocuments) && count($showdocuments) > 0)
                    <div class="row g-3">
                        @foreach($showdocuments as $file)
                            <div class="col-md-4">
                                <div class="card border bg-white shadow-sm p-3 d-flex flex-row align-items-center justify-content-between">
                                    <div class="d-flex align-items-center overflow-hidden">
                                        <i class="bi bi-file-earmark-text fs-3 text-primary me-3"></i>
                                        <div class="text-truncate">
                                            <div class="fw-bold text-dark text-truncate" style="font-size: 0.9rem;" title="{{ $file->name }}">{{ $file->name }}</div>
                                            <small class="text-muted text-uppercase" style="font-size: 0.7rem;">{{ $file->file_extension ?? 'file' }}</small>
                                        </div>
                                    </div>
                                    @if(!empty($file->file_path))
                                        <a href="{{ asset('storage/client_files/' . $file->file_path) }}" target="_blank" class="btn btn-sm btn-light text-primary" title="Download File">
                                            <i class="bi bi-download"></i>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4 text-muted small">
                        <i class="bi bi-file-earmark-x fs-4 d-block mb-1"></i> No documents uploaded for this client.
                    </div>
                @endif
            </div>

        </div>
    </div>
  <!-- Notes / Activity Log Section -->
    <div class="card border-light-subtle shadow-sm mt-5 mb-5">
        <div class="card-header bg-white py-3 border-bottom border-light d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
                <i class="bi bi-journal-text text-primary me-2"></i> Client Notes & Activity Logs
            </h6>
            <span class="badge bg-primary bg-opacity-10 text-primary">{{ count($show_notes) }} Entries</span>
        </div>
        
        <!-- Scrollable Container -->
        <div class="card-body bg-light p-3" style="max-height: 450px; overflow-y: auto;">
            @if(isset($show_notes) && count($show_notes) > 0)
                <div class="timeline">
                    @foreach($show_notes as $note)
                        <div class="card border-0 shadow-sm mb-3">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="d-flex align-items-center">
                                        <!-- Author Avatar or Name -->
                                        <div class="fw-bold text-dark me-2">
                                            <i class="bi bi-person-circle text-secondary me-1"></i>
                                            {{ $note->created_by_info->name ?? 'System User' }}
                                        </div>
                                        @if(isset($note->highlight) && $note->highlight == 'YES')
                                            <span class="badge bg-warning bg-opacity-10 text-warning border border-warning-subtle" style="font-size: 0.7rem;">Highlighted</span>
                                        @endif
                                    </div>
                                    <small class="text-muted" style="font-size: 0.8rem;">
                                        <i class="bi bi-clock me-1"></i>{{ \Carbon\Carbon::parse($note->created_at)->format('d M Y, h:i A') }}
                                    </small>
                                </div>
                                
                                <!-- Note Content -->
                                <p class="mb-0 text-dark" style="white-space: pre-wrap; font-size: 0.95rem;">
                                    {{ $note->notes_body ?? $note->note ?? $note->content ?? 'No content found' }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-4 text-muted small">
                    <i class="bi bi-journal-x fs-4 d-block mb-1"></i> No notes recorded for this client yet.
                </div>
            @endif
        </div>
    </div>

</div>
@endsection