<?php
include 'auth.php';
include 'database.php';

$categories_result = $conn->query("SELECT id, name FROM categories ORDER BY name");
$categories = $categories_result->fetch_all(MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<title>Create New Offer</title>
</head>
<body>
    <header>
        <img src="img/logo.png" alt="Logo" class="logo">
        <button id="navbtn" onclick="history.back()">
            <svg id="svg_back" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708z"/>
            </svg>
        </button>
        <button id="navbtn" onclick="window.location.href='index.php'">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"/>
                <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
            </svg>
        </button>
    </header>
    <section class="col-8 mx-auto" style="padding: 20px;">
        <h2>Create New Offer</h2>
        <form action="javascript:;" onsubmit="createPost()" method="post" class="row g-3" id="create_post_form">
            <div class="col-12 col-md-6">
                <label for="create_post_name" id="label">Offer Name (max 30 characters):</label>
                <input type="text" name="create_post_name" id="create_post_name" class="form-control" maxlength="30" placeholder="e.g., Custom Logo Design">
            </div>
            
            <div class="col-12 col-md-6">
                <label for="category_id" id="label">Category:</label>
                <select name="category_id" id="category_id" class="form-select">
                    <option value="" disabled selected>Select a category</option>
                    <?php foreach ($categories as $category): ?>
                        <option value="<?php echo $category['id']; ?>">
                            <?php echo htmlspecialchars($category['name']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            
            <div class="col-12">
                <label for="post_description" id="label">Description:</label>
                <textarea name="post_description" id="post_description" class="form-control" rows="5" placeholder="Describe what you're offering..."></textarea>
            </div>
            
            <div class="col-12">
                <label id="label">Images of your previous work (all 3 required):</label>
            </div>
            
            <div class="col-12 col-md-4">
                <label for="upload_image_1" class="form-label" id="text">Image 1:</label>
                <input type="file" name="image_1" id="upload_image_1" class="form-control" accept="image/*">
            </div>
            
            <div class="col-12 col-md-4">
                <label for="upload_image_2" class="form-label" id="text">Image 2:</label>
                <input type="file" name="image_2" id="upload_image_2" class="form-control" accept="image/*">
            </div>
            
            <div class="col-12 col-md-4">
                <label for="upload_image_3" class="form-label" id="text">Image 3:</label>
                <input type="file" name="image_3" id="upload_image_3" class="form-control" accept="image/*">
            </div>
            
            <div class="col-12 text-center" id="notes">
                Note: We recommend uploading high-quality images in landscape orientation.
            </div>
            
            <div class="d-grid col-4 mx-auto">
                <button type="submit" class="btn" id="actionbtn">Create Offer</button>
            </div>
        </form>
    </section>
<script src="js/script.js"></script>
</body>
</html>
