@extends('layouts.app')

@section('content')
@php
    $backUrl = ($user->account_type === 'partner') ? route('admin.partners.index') : route('users.index');
    $userProfileUrl = ($user->account_type === 'partner') ? route('admin.partners.show', $user->id) : route('users.view', $user->id);
    $userTypeBadge = ($user->account_type === 'partner') ? 'bg-primary' : 'bg-secondary';
    $userName = $user->name ?: ($user->email ?: ('User #' . $user->id));
    $userEmail = $user->email ?: ($user->phone_no ?: '-');
    $userType = ucfirst($user->account_type ?? 'User');
@endphp
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">{{ ($user->account_type === 'partner') ? 'Partner Management' : 'User Management' }}</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ $backUrl }}">{{ ($user->account_type === 'partner') ? 'Partner List' : 'User List' }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">User Interests (Sent)</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <a href="{{ $backUrl }}" class="btn btn-outline-secondary btn-sm"><i class="bx bx-arrow-back me-1"></i> Back</a>
            </div>
        </div>

        <hr />

        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                    <div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <h5 class="mb-0">Interests sent by <a href="{{ $userProfileUrl }}" class="fw-bold text-primary text-decoration-none">{{ $userName }}</a></h5>
                            <span class="badge {{ $userTypeBadge }}">{{ $userType }}</span>
                        </div>
                        <div class="text-muted small mt-1">{{ $userEmail }}</div>
                    </div>
                    <div class="btn-group" role="group" aria-label="Interest pages">
                        <a href="{{ route('showInterestManagement.user-interests-sent', $user->id) }}" class="btn btn-sm btn-primary">
                            Sent ({{ $sentCount }})
                        </a>
                        <a href="{{ route('showInterestManagement.user-interests-received', $user->id) }}" class="btn btn-sm btn-outline-primary">
                            Received ({{ $receivedCount }})
                        </a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="user-interests-sent-table" class="table table-striped table-bordered align-middle" style="width:100%">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Interested User</th>
                                <th style="width: 220px;">Created At</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@include('includes.commonjs')
<script>
    $(function() {
        $('#user-interests-sent-table').DataTable({
            processing: true,
            serverSide: true,
            order: [[2, 'desc']],
            ajax: "{{ route('showInterestManagement.user-interests-sent', $user->id) }}",
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'interest_user',
                    name: 'interest_user',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ]
        });
    });
</script>
@endsection