<!--LEAD SOURCE-->
<?php include 'header.php'; ?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
    /* ---------- Card Styling ---------- */
    .card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        background: #fff;
        transition: 0.3s;
    }

    .card:hover {
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
    }

    /* ---------- Header ---------- */
    .card-header {
        background: #f8f9fc;
        border-bottom: 1px solid #e6e6e6;
        padding: 16px 20px;
        border-radius: 16px 16px 0 0;
    }

    .card-header span {
        font-weight: 600;
        color: #333;
    }

    .card-header .form-select,
    .card-header .form-control {
        border-radius: 10px;
        border: 1px solid #d0d0d0;
        transition: 0.2s;
    }

    .card-header .form-select:focus,
    .card-header .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
    }

    /* ---------- Buttons ---------- */
    .btn-primary {
        background: linear-gradient(135deg, #007bff, #0056d2);
        border: none;
        border-radius: 10px;
        transition: all 0.3s ease;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0069d9, #004bb5);
        transform: translateY(-1px);
    }

    .btn-secondary {
        background: #6c757d;
        border: none;
        border-radius: 10px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-secondary:hover {
        background: #5a6268;
        transform: translateY(-1px);
    }

    .btn-info {
        background: linear-gradient(135deg, #17a2b8, #117a8b);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
        transition: all 0.3s ease;
    }

    .btn-info:hover {
        background: linear-gradient(135deg, #138496, #0f6674);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    }

    .btn-success {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background: linear-gradient(135deg, #218838, #166b29);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    }

    .btn-warning {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
        transition: all 0.3s ease;
    }

    .btn-warning:hover {
        background: linear-gradient(135deg, #e0a800, #c69500);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    }

    .btn-outline-danger {
        border: 1px solid #dc3545;
        color: #dc3545;
        border-radius: 10px;
        transition: 0.3s;
    }

    .btn-outline-danger:hover {
        background: #dc3545;
        color: #fff;
        transform: scale(1.05);
    }

    /* ---------- Table ---------- */
    .table {
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .table thead {
        background: #f1f4f9;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .table th {
        color: #495057;
        font-weight: 600;
        padding: 14px;
        border: none;
    }

    .table td {
        background: #fff;
        border: none;
        padding: 14px;
        vertical-align: middle;
        font-size: 15px;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .table tbody tr:hover td {
        background: #f9fafc;
    }

    /* ---------- Pagination ---------- */
    .pagination {
        margin-top: 10px;
    }

    .page-item .page-link {
        border-radius: 8px;
        border: none;
        background: #f0f2f6;
        color: #333;
        transition: 0.3s;
        font-weight: 500;
    }

    .page-item.active .page-link {
        background: linear-gradient(135deg, #007bff, #0056d2);
        color: #fff;
        font-weight: 600;
    }

    .page-item .page-link:hover {
        background: #007bff;
        color: #fff;
    }

    .modern-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .modern-table thead th {
        background: #f1f3f9;
        padding: 14px;
        font-weight: 700;
        color: #4c4f5a;
        border-bottom: 2px solid #e0e6f1;
        text-transform: uppercase;
        font-size: 13px;
    }

    .modern-table tbody tr {
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
        border-radius: 10px;
    }

    .modern-table tbody td {
        padding: 10px;
        vertical-align: middle;
        font-size: 14px;
        color: #333;
    }

    .modern-table tbody tr:hover {
        transform: scale(1.01);
        transition: 0.2s;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }
</style>


<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">Lead Source List</h6>
    </div>

    <div class="col-12">
        <div class="row">
            <div class="col-xl-4 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="text-xl" style="margin-bottom: 20px"></h6>
                        <form id="modelform" action="" method="post">
                            <div class="row gy-3">
                                <div class="col-sm-12">
                                    <input type="text" name="lead_source" class="form-control" placeholder="Enter Name" value="" oninput="this.value = this.value.replace(/[^A-Za-z\s]/g,'')" required/>
                                </div>
                                <div class="form-group text-end" style="margin-top: 20px">
                                    <button type="submit" class="btn btn-primary-600" data-bs-placement="bottom" title="Save">
                                        <i class="bi bi-floppy"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-xl-8 col-lg-12">
                <div class="card">
                    <div
                        class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <form method="get" id="paginationForm" class="row g-2 align-items-center w-100">
                                <!-- Show label -->
                                <div class="col-12 col-sm-auto">
                                    <span class="fw-semibold">Show</span>
                                </div>

                                <!-- Per page select -->
                                <div class="col-12 col-sm-auto">
                                    <select class="form-select form-select-sm" name="per_page" onchange="this.form.submit();">
                                        <option value="10">10</option>
                                        <option value="15">15</option>
                                        <option value="20">20</option>
                                    </select>
                                </div>

                                <!-- Search input -->
                                <div class="col-12 col-sm-4 col-md-3">
                                    <input type="text" name="search" id="searchBox" class="form-control form-control-sm" placeholder="Search" />
                                </div>

                                <!-- Search button -->
                                <div class="col-6 col-sm-auto">
                                    <button type="submit" class="btn btn-sm btn-primary w-100">
                                        <i class="bi bi-search"></i>
                                    </button>
                                </div>

                                <!-- Reset button -->
                                <div class="col-6 col-sm-auto">
                                    <button type="button" class="btn btn-sm btn-secondary w-100" id="resetSearch" onclick="resetForm();">
                                        <i class="bi bi-arrow-counterclockwise"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table modern-table mb-0">
                                <thead>
                                    <tr>
                                        <th>S.L</th>
                                        <th>Lead Source</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Instagram</td>
                                        <td>
                                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-success" title="Edit" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center me-1">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </a>
                                            <a href="javascript:void(0);" data-url="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-danger" class="delete-btn w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center" title="Delete">
                                                <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--PAGINATION CODE-->
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-24">
                            <span>Showing 1 to 10 of 12 entries</span>
                            <ul class="pagination d-flex flex-wrap align-items-center gap-2 justify-content-center">
                                <li class="page-item">
                                    <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)"><iconify-icon icon="ep:d-arrow-left" class=""></iconify-icon></a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md bg-primary-600 text-white" href="javascript:void(0)">1</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">2</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link bg-neutral-200 text-secondary-light fw-semibold radius-8 border-0 d-flex align-items-center justify-content-center h-32-px w-32-px text-md" href="javascript:void(0)"> <iconify-icon icon="ep:d-arrow-right" class=""></iconify-icon> </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--Delete Button Modal Script-->
<script>
    document.querySelectorAll('.delete-btn').forEach(function(button) {
        button.addEventListener('click', function(e) {
            e.preventDefault(); // prevent default link action

            const url = this.getAttribute('href'); // get the delete URL

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to undo this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No',
                customClass: {
                    title: 'swal-small-title',
                    htmlContainer: 'swal-small-text',
                    confirmButton: 'swal-small-btn',
                    cancelButton: 'swal-small-btn'

                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Proceed with delete
                    window.location.href = 'lead_source.php';
                }
            });
        });
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<?php include 'footer.php'; ?>