php_assessment_1/campaignAdd.php

<div class="container mt-5">
    <h2 class="text-center">Add Campaign Data</h2>
    <?php if (isset($error) && $error) : ?>
        <div class="alert alert-danger" role="alert">
            Please fill in all required fields!
        </div>
    <?php endif; ?>

    <form action="/<?php echo $_SESSION['role']; ?>/campaign/add" method="POST" class="mt-4">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="file_id">Google Sheet</label>
            <div class="card">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <input type="text" name="file_id" id="file_id" class="form-control bg-white text-center" 
                               placeholder="No file selected" readonly required>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="openDrivePicker()">
                        <i class="fas fa-file-excel mr-2"></i>Select Google Sheet
                    </button>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/picker.js"></script>
<script>

const CLIENT_ID = "356934742115-c707dqbhct9b7gj64eo9rqfdfi47rb8o.apps.googleusercontent.com";
const API_KEY = "AIzaSyB7JhbYloABBC-jZebyjHoiXUiM-s_7sBA";
const SCOPE = 'https://www.googleapis.com/auth/drive.file openid';
let oauthToken;

function loadPicker() {
    gapi.load('auth2', () => {
        gapi.auth2.init({ client_id: CLIENT_ID, scope: SCOPE }).signIn().then(user => {
            oauthToken = user.getAuthResponse().access_token;
            createPicker();
        });
    });
    gapi.load('picker', { callback: onPickerApiLoad });
}
function onPickerApiLoad() {}
function createPicker() {
    if (oauthToken) {
        const view = new google.picker.DocsView(google.picker.ViewId.SPREADSHEETS)
            .setIncludeFolders(false)
            .setSelectFolderEnabled(false);

        const picker = new google.picker.PickerBuilder()
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_DISABLED)
            .setOAuthToken(oauthToken)
            .addView(view)
            .setDeveloperKey(API_KEY)
            .setCallback(pickerCallback)
            .build();
        picker.setVisible(true);
    }
}
function pickerCallback(data) {
    if (data.action === google.picker.Action.PICKED) {
        const doc = data.docs[0];
        document.getElementById('file_id').value = doc.id;
    }
}
function openDrivePicker() {
    loadPicker();
}
</script>