@extends('layouts.master')
@section('title', 'Customer 360 - ' . $customer->full_name)

@section('content')
<div class="row">
    <!-- Left Column: Personal Info & Actions -->
    <div class="col-md-4">
        <!-- Profile Card -->
        <div class="card mb-3">
            <div class="card-body text-center">
                <div class="mb-3">
                    <span class="avatar-initial rounded-circle bg-primary text-white display-4 p-3">
                        {{ strtoupper(substr($customer->first_name ?? 'C', 0, 1)) }}
                    </span>
                </div>
                <h4 class="mb-1">{{ $customer->first_name }} {{ $customer->last_name }}</h4>
                <p class="text-muted mb-1">{{ $customer->job ?? 'No Job Title' }}</p>
                <div class="badge bg-light text-dark mb-3">{{ $customer->card->card_no ?? 'No Card Assigned' }}</div>
                
                <div class="d-grid gap-2">
                    <form action="{{ route('tech-support.customer.reset-password', $customer->card_personal_data_id) }}" method="POST" onsubmit="return confirm('Are you sure you want to force reset the password for this user? They will be required to change it upon next login.');">
                        @csrf
                        <button class="btn btn-outline-warning w-100" type="submit">
                            <i data-feather="lock"></i> Reset App Password
                        </button>
                    </form>
                    <!-- Add more actions if needed -->
                    <button type="button" class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#notificationModal">
                        <i data-feather="bell"></i> Send Push Notification
                    </button>
                </div>
            </div>
            <!-- Notification Modal -->
            <div class="modal fade" id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <form action="{{ route('tech-support.customer.notify') }}" method="POST">
                        @csrf
                        <input type="hidden" name="card_id" value="{{ $customer->card->cards_id }}">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="notificationModalLabel">Send Push Notification</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="title" class="form-label">Title</label>
                                    <input type="text" class="form-control" id="title" name="title" required>
                                </div>
                                <div class="mb-3">
                                    <label for="body" class="form-label">Message Body</label>
                                    <textarea class="form-control" id="body" name="body" rows="3" required></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Send Notification</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between">
                    <span>Mobile</span>
                    <strong>{{ $customer->card->mobile_number ?? 'N/A' }}</strong>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Status</span>
                    @if(($customer->card->status ?? '') == 'active')
                        <span class="badge bg-success">Active</span>
                    @else
                        <span class="badge bg-danger">Inactive</span>
                    @endif
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Province/City</span>
                    <span>{{ $customer->card->province->province_name_en ?? 'N/A' }}</span>
                </li>
            </ul>
        </div>

        <!-- Devices -->
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Devices</h5>
                <div>
                    <form action="{{ route('tech-support.customer.logout-all', $customer->card_personal_data_id) }}" method="POST" class="d-inline" onsubmit="return confirm('Force logout ALL devices? The user will need to sign in again on all devices.');">
                        @csrf
                        <button class="btn btn-sm btn-outline-danger" title="Force Logout All">
                            <i data-feather="log-out"></i> Logout All
                        </button>
                    </form>
                    <span class="badge bg-secondary ms-2">{{ $customer->card->devices->count() }}</span>
                </div>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    @forelse($customer->card->devices as $device)
                    <li class="list-group-item">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-0">{{ $device->device_model ?? 'Unknown Device' }}</h6>
                                <small class="text-muted">Last active: {{ $device->updated_at ? $device->updated_at->diffForHumans() : 'Never' }}</small>
                                <div class="small text-muted text-truncate" style="max-width: 150px;" title="{{ $device->device_token }}">
                                    Token: {{ substr($device->device_token, 0, 10) }}...
                                </div>
                            </div>
                            @if($device->is_active)
                                <form action="{{ route('tech-support.device.unlink') }}" method="POST" onsubmit="return confirm('Unlink this device? User will be logged out.');">
                                    @csrf
                                    <input type="hidden" name="device_id" value="{{ $device->card_devices_id }}">
                                    <input type="hidden" name="reason_log" value="Agent Unlink via 360">
                                    <button type="submit" class="btn btn-sm btn-icon btn-danger" title="Unlink Device">
                                        <i data-feather="trash-2"></i>
                                    </button>
                                </form>
                            @else
                                <span class="badge bg-light text-dark">Unlinked</span>
                            @endif
                        </div>
                    </li>
                    @empty
                    <li class="list-group-item text-center text-muted">No devices linked.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>

    <!-- Right Column: Subscriptions & History -->
    <div class="col-md-8">
        <!-- Subscriptions -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0">Current Subscription</h5>
            </div>
            <div class="card-body">
                @php
                    // Get latest subscription from the controller-passed collection
                    $latestSub = $subscriptions->first();
                @endphp

                @if($latestSub)
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h3 class="text-primary">{{ $latestSub->package->pkg_name_en ?? 'Unknown Package' }}</h3>
                            <p class="text-muted mb-0">
                                Valid until: <strong>{{ $latestSub->subscription_ends_at ? \Carbon\Carbon::parse($latestSub->subscription_ends_at)->format('d M, Y') : 'N/A' }}</strong>
                            </p>
                            <p class="text-muted mb-0">
                                Subscribed: <strong>{{ $latestSub->subscription_starts_at ? \Carbon\Carbon::parse($latestSub->subscription_starts_at)->format('d M, Y') : 'N/A' }}</strong>
                            </p>
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="mb-2">
                                @php
                                    $isActive = $latestSub->is_active || $latestSub->subscription_status === 'active';
                                    $isFuture = $latestSub->subscription_ends_at === null || $latestSub->subscription_ends_at >= now();
                                @endphp

                                @if($isActive && $isFuture)
                                    <span class="badge bg-success fs-6">Active</span>
                                @elseif(!$isActive)
                                    <span class="badge bg-danger fs-6">Inactive</span>
                                @else
                                    <span class="badge bg-warning text-dark fs-6">Expired</span>
                                @endif
                            </div>
                            <small class="text-muted">Paid: {{ number_format($latestSub->amount_paid, 2) }} EGP</small>
                        </div>
                    </div>
                @else
                    <div class="alert alert-warning mb-0">
                        <i data-feather="alert-circle" class="me-2"></i> No subscription history found.
                    </div>
                @endif
            </div>
        </div>

        <!-- Transactions History -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Transaction History</h5>
                <span class="badge bg-light text-dark">Found: {{ $debugCount ?? 0 }} records</span>
                <a href="{{ route('tech-support.transactions', ['search' => $customer->mobile_number]) }}" class="btn btn-sm btn-link">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Date</th>
                            <th>Brand</th>
                            <th>Original</th>
                            <th>Disc.</th>
                            <th>Paid</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentTransactions as $txn)
                        <tr>
                            <td>
                                {{ $txn->created_at ? \Carbon\Carbon::parse($txn->created_at)->format('d M Y, H:i') : 'N/A' }}
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span class="fw-bold">{{ $txn->brand->brand_name_en ?? 'Unknown Brand' }}</span>
                                </div>
                            </td>
                            <td>{{ number_format($txn->transaction_value ?? 0, 2) }}</td>
                            <td>{{ number_format($txn->discount_percentage ?? 0, 1) }}%</td>
                            <td><strong>{{ number_format($txn->amount_to_be_paid ?? 0, 2) }}</strong></td>
                            <td>
                                @if($txn->status == 'approved') 
                                    <span class="badge bg-success">Approved</span>
                                @elseif($txn->status == 'rejected') 
                                    <span class="badge bg-danger">Rejected</span>
                                @else 
                                    <span class="badge bg-warning text-dark">Pending</span> 
                                @endif
                            </td>
                            <td>
                                @if($txn->status == 'approved')
                                    <form action="{{ route('tech-support.transactions.refund', $txn->card_usage_history_id) }}" method="POST" class="d-inline" onsubmit="return confirm('Refund this transaction?');">
                                        @csrf
                                        <button class="btn btn-sm btn-light-danger" title="Refund"><i data-feather="corner-up-left"></i> Refund</button>
                                    </form>
                                @endif

                                @if($txn->status == 'waiting')
                                    <form action="{{ route('tech-support.transactions.approve', $txn->card_usage_history_id) }}" method="POST" class="d-inline" onsubmit="return confirm('Force approve this transaction?');">
                                        @csrf
                                        <button class="btn btn-sm btn-light-success" title="Force Approve"><i data-feather="check-circle"></i> Approve</button>
                                    </form>
                                @endif

                                @if($txn->status == 'pending')
                                    <form action="{{ route('tech-support.transactions.waiting', $txn->card_usage_history_id) }}" method="POST" class="d-inline" onsubmit="return confirm('Move transaction to waiting status?');">
                                        @csrf
                                        <button class="btn btn-sm btn-light-warning" title="Force Waiting"><i data-feather="clock"></i> To Waiting</button>
                                    </form>
                                @endif
                                
                                @if($txn->status == 'refunded')
                                     <span class="text-muted small">Refunded via Support</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center py-4 text-muted">
                                <i data-feather="inbox" class="mb-2" style="width: 24px; height: 24px;"></i>
                                <p class="mb-0">No transactions recorded.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection