<?php
// Start the session
session_start();
ob_start();

// If the user is not logged in
if (!isset($_SESSION['user'])) {
    header('Location: index.php');
    exit;
}

// Include the database connection
include_once('../inc/db.php');

?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yeni ürün ekle • panel</title>
    <!-- TailwindCSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- JQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- Toastr JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <!-- Toastr CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
    <!-- CKEditor -->
    <script src="https://cdn.ckeditor.com/4.20.2/standard/ckeditor.js"></script>
    <!-- Favicon -->
    <link rel="icon" href="src/icon/favicon.ico" type="image/x-icon"/>
</head>
<body>
<header class="bg-white shadow">
    <div class="flex justify-between items-center h-24 px-8">
        <div class="flex items-center">
            <img src="src/img/logo.png" class="w-full h-12" alt="Logo">
        </div>
        <div class="flex items-center">
            <span class="text-gray-500">
                <?= $_SESSION['user']->username ?>
                <small class="text-gray-400">olarak giriş yaptın.</small>
            </span>
        </div>
    </div>
</header>
<div class="flex flex-col md:flex-row">
    <div class="w-full md:w-64 bg-gray-800 h-screen">
        <nav class="mt-4">
            <a href="dashboard.php" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 hover:text-white">
                Ana Sayfa
            </a>
            <a href="logs.php" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 hover:text-white">
                Loglar
            </a>
            <a href="yeniurun.php" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 hover:text-white">
                Yeni Ürün Ekle
            </a>
            <a href="logout.php" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 hover:text-white">
                Çıkış Yap
            </a>
        </nav>
    </div>
    <div class="w-full md:flex-1">
        <main class="p-4">
            <h1 class="text-2xl font-bold mb-4">Yeni Ürün Ekle</h1>
            <form id="new-product-form">
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-name">
                        Ürün Adı
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-name" name="product-name" type="text" required>
                </div>
				<div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-name">
                        Ürün Kategori
                    </label>
                    <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-category" name="product-category" type="text" required>
						<option selected value="elektronik">Seçiniz</option>
						
						<option value="elektronik">Elektronik</option>
						<option value="ev">EV YAŞAM</option>
						<option value="giyim">GİYİM AKSESUAR</option>
						<option value="anne">ANNE BEBEK OYUNCAK</option>
						<option value="oto">OTO BAHÇE YAPI</option>
						<option value="kozmetik">KOZMETİK KİŞİSEL BAKIM</option>
						<option value="kitap">KİTAP KIRTASİYE</option>
						
						</select>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-brand">
                        Ürün Marka
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-brand" name="product-brand" type="text" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product_properties">
                        Ürün Açıklaması
                    </label>
                    <textarea
                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                            id="product_properties" required></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-price">
                        Ürün Fiyatı
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-price" name="product-price" type="number" min="0" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-code">
                        Ürün Kodu
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-code" name="product-code" type="number" min="0" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-image">
                        Ürün Resmi
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-image" name="product-image" type="file" accept="image/*" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section1">
                        Section 1
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section1" name="product-section1" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section2">
                        Section 2
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section2" name="product-section2" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section3">
                        Section 3
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section3" name="product-section3" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section4">
                        Section 4
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section4" name="product-section4" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section5">
                        Section 5
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section5" name="product-section5" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section6">
                        Section 6
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section6" name="product-section6" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section7">
                        Section 7
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section7" name="product-section7" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section8">
                        Section 8
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section8" name="product-section8" type="text" min="0" required>
                </div>
              <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="product-section9">
                        Section 9
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                           id="product-section9" name="product-section9" type="text" min="0" required>
                </div>
                <div class="flex items-center justify-between">
                    <button class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-200"
                            type="submit">
                        Ürün Ekle
                    </button>
                </div>
            </form>
        </main>
    </div>
</div>
<script>
    $(document).ready(function () {
        CKEDITOR.config.entities_latin = false;
        CKEDITOR.replace('product_properties');
        // get ckeditor data
        const form = $('#new-product-form');
        const productName = $('#product-name');
        const productCategory = $('#product-category');
        const productPrice = $('#product-price');
        const productImage = $('#product-image');
        const productBrand = $('#product-brand');
        const productCode = $('#product-code');
        const productSection1 = $('#product-section1');
        const productSection2 = $('#product-section2');
        const productSection3 = $('#product-section3');
        const productSection4 = $('#product-section4');
        const productSection5 = $('#product-section5');
        const productSection6 = $('#product-section6');
        const productSection7 = $('#product-section7');
        const productSection8 = $('#product-section8');
        const productSection9 = $('#product-section9');
      
      
      
        const action = 'new-product'
        form.submit(function (event) {
            event.preventDefault();
            const formData = new FormData();
            formData.append('name', productName.val());
            formData.append('category', productName.val());
            formData.append('price', productPrice.val());
            formData.append('image', productImage[0].files[0]);
            formData.append('action', action);
            formData.append('properties', CKEDITOR.instances.product_properties.getData());
            formData.append('brand', productBrand.val());
            formData.append('code', productCode.val());
          
            formData.append('section1', productSection1.val());
            formData.append('section2', productSection2.val());
            formData.append('section3', productSection3.val());
            formData.append('section4', productSection4.val());
            formData.append('section5', productSection5.val());
            formData.append('section6', productSection6.val());
            formData.append('section7', productSection7.val());
            formData.append('section8', productSection8.val());
            formData.append('section9', productSection9.val());
            $.ajax({
                url: '/admin/inc/ajax.php',
                type: 'POST',
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {
                    response = JSON.parse(response);
                    if (response.status) {
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message);
                    }
                }
            })
        })
    })
</script>
</body>
</html>