<?php

require_once 'includes/provider_auth.php';
require_once '../config/constants.php';

/*
-----------------------------------
FILTERS
-----------------------------------
*/

$page = $_GET['page'] ?? 1;
$limit = $_GET['limit'] ?? 10;
$search = $_GET['search'] ?? '';
$status = $_GET['status'] ?? '';
$date = $_GET['date'] ?? '';

$query = API_URL . "providers/leads.php?page=$page&limit=$limit";

if ($search) {
    $query .= "&search=" . urlencode($search);
}

if ($status) {
    $query .= "&status=" . $status;
}

if ($date) {
    $query .= "&date=" . $date;
}

/*
-----------------------------------
CALL API
-----------------------------------
*/

$ch = curl_init();

curl_setopt_array($ch, [
    CURLOPT_URL => $query,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => [
        'X-API-KEY: ' . API_KEY,
        'Authorization: Bearer ' . $_SESSION['provider_token']
    ]
]);

$response = curl_exec($ch);
curl_close($ch);

$data = json_decode($response, true);

$leads = $data['data']['data'] ?? [];
$total = $data['data']['total'] ?? 0;

?>

<?php include '../admin/partials/layouts/layoutTop.php' ?>

<div class="dashboard-main-body">

    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">

        <h6 class="fw-semibold mb-0">My Leads</h6>

        <ul class="d-flex align-items-center gap-2">

            <li class="fw-medium">
                <a href="dashboard.php" class="d-flex align-items-center gap-1 hover-text-primary">
                    <iconify-icon icon="solar:home-smile-angle-outline"></iconify-icon>
                    Dashboard
                </a>
            </li>

            <li>-</li>
            <li class="fw-medium">Leads</li>

        </ul>

    </div>


    <div class="card h-100 p-0 radius-12">

        <div
            class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center flex-wrap gap-3 justify-content-between">

            <div class="d-flex align-items-center flex-wrap gap-3">

                <span class="text-md fw-medium text-secondary-light">Show</span>

                <select class="form-select form-select-sm w-auto ps-12 py-6 radius-12 h-40-px">
                    <option>10</option>
                    <option>20</option>
                    <option>50</option>
                </select>

                <form class="navbar-search">

                    <input type="text" name="search" value="<?php echo htmlspecialchars($search); ?>"
                        class="bg-base h-40-px w-auto" placeholder="Search Name / Phone">

                    <iconify-icon icon="ion:search-outline"></iconify-icon>

                </form>

                <form method="GET" class="d-flex align-items-center gap-2">

                    <input type="date" name="date" value="<?php echo htmlspecialchars($date); ?>"
                        class="form-control form-control-sm">

                    <select name="status" class="form-select form-select-sm">

                        <option value="">All Status</option>
                        <option value="new" <?php if ($status == "new")
                            echo "selected"; ?>>New</option>
                        <option value="distributed" <?php if ($status == "distributed")
                            echo "selected"; ?>>Distributed
                        </option>
                        <option value="in_progress" <?php if ($status == "in_progress")
                            echo "selected"; ?>>In Progress
                        </option>
                        <option value="contacted" <?php if ($status == "contacted")
                            echo "selected"; ?>>Contacted</option>
                        <option value="converted" <?php if ($status == "converted")
                            echo "selected"; ?>>Converted</option>
                        <option value="closed" <?php if ($status == "closed")
                            echo "selected"; ?>>Closed</option>
                        <option value="spam" <?php if ($status == "spam")
                            echo "selected"; ?>>Spam</option>

                    </select>

                    <button class="btn btn-sm btn-primary">Filter</button>

                </form>

            </div>

        </div>


        <div class="card-body p-24">

            <div class="table-responsive">

                <style>
                    /* MOBILE CARD VIEW */

                    @media (max-width:768px) {

                        table.mobile-card-table thead {
                            display: none;
                        }

                        table.mobile-card-table,
                        table.mobile-card-table tbody,
                        table.mobile-card-table tr,
                        table.mobile-card-table td {
                            display: block;
                            width: 100%;
                        }

                        table.mobile-card-table tr {
                            background: #fff;
                            border: 1px solid #e5e5e5;
                            border-radius: 10px;
                            padding: 14px;
                            margin-bottom: 15px;
                            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
                        }

                        table.mobile-card-table td {
                            border: none;
                            padding: 6px 0;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 14px;
                        }

                        table.mobile-card-table td::before {
                            content: attr(data-label);
                            font-weight: 600;
                            color: #555;
                        }

                        .mobile-call-btn {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            background: #25D366;
                            color: #fff;
                            padding: 8px 14px;
                            border-radius: 8px;
                            text-decoration: none;
                            font-size: 14px;
                            gap: 6px;
                        }

                    }

                    /* DESKTOP TABLE STYLE */

                    @media (min-width:769px) {

                        .mobile-call-btn {
                            display: none;
                        }

                        .mobile-card-table thead {
                            background: #f8f9fa;
                        }

                        .mobile-card-table th {
                            font-weight: 600;
                            color: #444;
                        }

                        .mobile-card-table td {
                            vertical-align: middle;
                        }

                    }
                </style>


                <table class="table table-hover mobile-card-table">

                    <thead>

                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Category</th>
                            <th>Sub Category</th>
                            <th>Status</th>
                            <th>Lead Time</th>
                            <th class="text-center">Action</th>
                        </tr>

                    </thead>

                    <tbody>

                        <?php if ($leads): ?>

                            <?php foreach ($leads as $lead): ?>

                                <tr>

                                    <td data-label="ID"><?php echo $lead['lead_id']; ?></td>

                                    <td data-label="Name"><?php echo htmlspecialchars($lead['name']); ?></td>

                                    <td data-label="Phone"><?php echo htmlspecialchars($lead['phone']); ?></td>

                                    <td data-label="Category"><?php echo htmlspecialchars($lead['category']); ?></td>

                                    <td data-label="Sub Category"><?php echo htmlspecialchars($lead['sub_category']); ?></td>

                                    <td data-label="Status">
                                        <?php echo ucfirst(str_replace("_", " ", $lead['status'])); ?>
                                    </td>

                                    <td data-label="Lead Time">
                                        <?php echo date("d M Y H:i", strtotime($lead['sent_at'])); ?>
                                    </td>

                                    <td data-label="Action" class="text-center">

                                        <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">

                                            <a href="lead-view.php?id=<?php echo $lead['distribution_id']; ?>"
                                                class="btn btn-sm btn-primary">
                                                View
                                            </a>

                                            <a href="tel:<?php echo htmlspecialchars($lead['phone']); ?>"
                                                class="mobile-call-btn">

                                                <iconify-icon icon="ic:baseline-call"></iconify-icon>
                                                Call

                                            </a>

                                        </div>

                                    </td>

                                </tr>

                            <?php endforeach; ?>

                        <?php else: ?>

                            <tr>
                                <td colspan="8" class="text-center">No Leads Found</td>
                            </tr>

                        <?php endif; ?>

                    </tbody>

                </table>

            </div>


            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-24">

                <span>Total Leads: <?php echo $total; ?></span>

            </div>

        </div>

    </div>

</div>

<?php include '../admin/partials/layouts/layoutBottom.php' ?>