Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.3.30

User:

u231988116

Directory:

/home/u231988116/domains/ominteriorstudio.in/public_html/crm

Free Space:

7.42 TB

🔧 Quick Actions

✏️ Editing: addvendors.php

<?php
session_start();

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: signin');
    exit();
}

// Include database connection
require_once 'db.php';

// Verify role-based access
checkAccess();

$user_id = $_SESSION['user_id'];
 $user_name = isset($_SESSION['user_name']) ? $_SESSION['user_name'] : 'Admin User';
 $message = '';
 $message_type = '';

// Vendor categories
 $vendor_categories = [
    'Raw Materials Supplier (Cement, Steel)',
    'Specialty Subcontractor (Electrical, Plumbing)',
    'Machinery Rental & Maintenance',
    'Logistics & Transportation',
    'Consulting & Engineering Services',
    'Safety Equipment Provider',
];

// Handle form submission - maps to vendors table: vendor_name, contact_person, phone, email, category, payment_terms, address, created_by_user_id
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['vendor_name'])) {
    $vendor_name = trim($_POST['vendor_name']);
    $contact_person = trim($_POST['contact_person']);
    $phone = trim($_POST['phone']);
    $email = trim($_POST['email']);
    $category = $_POST['category'];
    $rating = (int)$_POST['rating'];
    $payment_terms = trim($_POST['payment_terms']);
    $address = trim($_POST['address']);
    
    // New fields for Material Kit
    $material_kit_given = $_POST['material_kit_given'];
    $location_details = !empty($_POST['location_details']) ? trim($_POST['location_details']) : NULL;
    $material_kit_image = NULL;
    
    // File upload handling for Material Kit Image
    if ($material_kit_given === 'Yes' && isset($_FILES['material_kit_image']) && $_FILES['material_kit_image']['error'] === UPLOAD_ERR_OK) {
        $upload_dir = 'uploads/vendor_kits/';
        
        // Create directory if it doesn't exist
        if (!is_dir($upload_dir)) {
            mkdir($upload_dir, 0755, true);
        }
        
        $file_tmp = $_FILES['material_kit_image']['tmp_name'];
        $file_name = $_FILES['material_kit_image']['name'];
        $file_size = $_FILES['material_kit_image']['size'];
        $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
        
        // Allowed extensions
        $allowed_exts = ['jpg', 'jpeg', 'png'];
        
        // Validate file type
        if (!in_array($file_ext, $allowed_exts)) {
            $message = 'Error: Invalid file type. Only JPG, JPEG, and PNG files are allowed.';
            $message_type = 'danger';
        } elseif ($file_size > 5 * 1024 * 1024) { // 5MB max
            $message = 'Error: File size exceeds 5MB limit.';
            $message_type = 'danger';
        } else {
            // Generate unique filename
            $new_file_name = uniqid('vendor_kit_') . '.' . $file_ext;
            $upload_path = $upload_dir . $new_file_name;
            
            if (move_uploaded_file($file_tmp, $upload_path)) {
                $material_kit_image = $upload_path;
            } else {
                $message = 'Error: Failed to upload file.';
                $message_type = 'danger';
            }
        }
    } elseif ($material_kit_given === 'Yes') {
        // Image is required when Material Kit is Yes
        $message = 'Error: Material Kit Image is required when Material Kit Given is Yes.';
        $message_type = 'danger';
    }
    
    // Only proceed with insert if no errors
    if (empty($message)) {
        // Insert into vendors table using mysqli prepared statement
        $sql = "INSERT INTO vendors (vendor_name, contact_person, phone, email, category, rating, payment_terms, address, material_kit_given, location_details, material_kit_image, created_by_user_id)
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";

$stmt = mysqli_prepare($conn, $sql);

if ($stmt) {
            mysqli_stmt_bind_param($stmt, "sssssisssssi", $vendor_name, $contact_person, $phone, $email, $category, $rating, $payment_terms, $address, $material_kit_given, $location_details, $material_kit_image, $user_id);

if (mysqli_stmt_execute($stmt)) {
                $message = 'Vendor registered successfully!';
                $message_type = 'success';
            } else {
                $message = 'Error: ' . mysqli_error($conn);
                $message_type = 'danger';
            }

mysqli_stmt_close($stmt);
        } else {
            $message = 'Error preparing statement: ' . mysqli_error($conn);
            $message_type = 'danger';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Vendor - ConstructCRM</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

body {
        font-family: 'Inter', sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
        color: #2c3e50;
        font-size: 14px;
        line-height: 1.4;
        overflow-x: hidden;
    }

/* Header */
    .header {
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-height);
        z-index: 1000;
        display: flex;
        align-items: center;
        padding: 0 20px;
    }

.logo {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 20px;
        color: var(--primary-color);
        text-decoration: none;
    }

.logo i {
        font-size: 24px;
        margin-right: 10px;
    }

.header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

.mobile-menu-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--primary-color);
        margin-right: 15px;
        cursor: pointer;
    }

/* User Dropdown */
    .user-dropdown {
        position: relative;
    }

.user-profile {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: var(--border-radius);
        transition: var(--transition);
    }

.user-profile:hover {
        background-color: #f8f9fa;
    }

.user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 10px;
    }

.user-name {
        font-weight: 500;
        margin-right: 5px;
    }

.dropdown-arrow {
        font-size: 12px;
        color: #666;
        transition: var(--transition);
    }

.user-dropdown.show .dropdown-arrow {
        transform: rotate(180deg);
    }

.user-dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        min-width: 180px;
        padding: 8px 0;
        margin-top: 5px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: var(--transition);
        z-index: 1001;
    }

.user-dropdown.show .user-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.dropdown-item {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        color: #555;
        text-decoration: none;
        transition: var(--transition);
    }

.dropdown-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color);
    }

.dropdown-item i {
        margin-right: 10px;
        font-size: 16px;
    }

.dropdown-divider {
        height: 1px;
        background-color: #eee;
        margin: 8px 0;
    }

/* Main Layout */
    .main-container {
        display: flex;
        min-height: calc(100vh - var(--header-height));
        margin-top: var(--header-height);
    }

/* Sidebar Navigation */
    .sidebar-nav {
        width: var(--nav-width);
        background-color: #fff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 999;
        overflow-y: auto;
        transition: var(--transition);
    }

.nav-section {
        padding: 15px 0;
    }

.nav-section:last-child {
        padding-bottom: 20px;
    }

.nav-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #999;
        padding: 0 20px;
        margin-bottom: 10px;
    }

.nav-list {
        list-style: none;
    }

.nav-item {
        margin-bottom: 5px;
    }

.nav-link {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        color: #555;
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
        position: relative;
    }

.nav-link i {
        font-size: 18px;
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }

.nav-link:hover {
        background-color: rgba(151, 124, 73, 0.05);
        color: var(--primary-color);
    }

/* Enhanced Active State for Navigation */
    .nav-link.active {
        background: linear-gradient(90deg, rgba(151, 124, 73, 0.15) 0%, rgba(151, 124, 73, 0.05) 100%);
        color: var(--primary-color);
        font-weight: 600;
    }

.nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--primary-color);
    }

/* Content Wrapper */
    .content-wrapper {
        flex: 1;
        margin-left: var(--nav-width);
        display: flex;
        flex-direction: column;
        transition: var(--transition);
    }

.content-header {
        background-color: #fff;
        padding: 20px 30px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.page-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
    }

.breadcrumb {
        background-color: transparent;
        padding: 0;
        margin: 0;
        font-size: 13px;
    }

.breadcrumb-item {
        color: #999;
    }

.breadcrumb-item a {
        color: #999;
        text-decoration: none;
        transition: var(--transition);
    }

.breadcrumb-item a:hover {
        color: var(--primary-color);
    }

.breadcrumb-item.active {
        color: var(--primary-color);
    }

.breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        color: #ccc;
    }

/* Main Content */
    .main-content {
        flex: 1;
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* Form Container */
    .form-container {
        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        width: 100%;
        max-width: 800px;
        overflow: hidden;
    }

.form-header {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
        padding: 25px 30px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

.form-title {
        font-size: 22px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
    }

.form-body {
        padding: 40px;
    }

.form-group {
        margin-bottom: 25px;
    }

.form-label {
        font-weight: 500;
        color: var(--dark-color);
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.form-label i {
        color: var(--primary-color);
        font-size: 18px;
    }

.form-control, .form-select {
        border: 2px solid #e9ecef;
        border-radius: var(--border-radius);
        padding: 14px 16px;
        font-size: 15px;
        transition: var(--transition);
        background: #fff;
    }

.form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(151, 124, 73, 0.1);
        outline: none;
        transform: translateY(-2px);
    }

.btn {
        border-radius: var(--border-radius);
        font-weight: 600;
        padding: 14px 28px;
        font-size: 16px;
        transition: var(--transition);
        cursor: pointer;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

.btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
        box-shadow: 0 4px 12px rgba(151, 124, 73, 0.3);
    }

.btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(151, 124, 73, 0.4);
    }

.btn-primary:active {
        transform: translateY(-1px);
    }

/* Alert styling */
    .alert {
        border-radius: var(--border-radius);
        border: none;
        padding: 16px 20px;
        margin-top: 20px;
        font-weight: 500;
    }

.alert-success {
        background-color: rgba(40, 167, 69, 0.1);
        color: var(--success-color);
    }

/* Star Rating Component - Enhanced */
    .star-rating-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-top: 10px;
        border: 1px solid #e9ecef;
    }

.star-rating {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

.star {
        font-size: 32px;
        color: #ddd;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

.star:hover {
        transform: scale(1.15);
    }

.star.filled {
        color: #ffc107;
        animation: starPop 0.3s ease;
    }

.star.hover {
        color: #ffdb4d;
        transform: scale(1.15);
    }

@keyframes starPop {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }

.rating-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

.rating-text {
        font-size: 14px;
        color: #666;
        font-weight: 500;
    }

.rating-value {
        background: var(--primary-color);
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        display: none;
    }

.rating-value.show {
        display: inline-block;
    }

/* Responsive */
    @media (max-width: 768px) {
        .mobile-menu-toggle {
            display: block;
        }
        
        .sidebar-nav {
            transform: translateX(-100%);
            width: 280px;
            z-index: 1001;
        }
        
        .sidebar-nav.show {
            transform: translateX(0);
        }
        
        .content-wrapper {
            margin-left: 0;
        }

.overlay {
            z-index: 1000;
        }

.overlay.show {
            display: block;
        }

.content-header {
            padding: 15px 20px;
            flex-direction: column;
            align-items: flex-start;
        }

.page-title {
            font-size: 20px;
            margin-bottom: 10px;
        }

.main-content {
            padding: 20px;
        }

.form-body {
            padding: 25px;
        }

.header {
            padding: 0 15px;
        }

.logo {
            font-size: 18px;
        }

.logo i {
            font-size: 20px;
        }

.user-name {
            display: none;
        }

.user-avatar {
            width: 32px;
            height: 32px;
            font-size: 14px;
        }

.star {
            font-size: 28px;
        }
    }

/* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 4px;
    }

::-webkit-scrollbar-thumb:hover {
        background: #ccc;
    }

/* Overlay for mobile menu */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

.overlay.show {
        display: block;
    }
    </style>
</head>
<body>
    
    <header class="header">
        <button class="mobile-menu-toggle" id="mobileMenuToggle">
            <i class="bi bi-list"></i>
        </button>
        <a href="crmdashboard" class="logo">
            <img src="./assets/logo.png" alt="ConstructCRM Logo" style="height: 60px; width: 85px;">
        </a>
        <div class="header-actions">
            
            <div class="user-dropdown" id="userDropdown">
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar"><?php echo htmlspecialchars(strtoupper(substr($user_name, 0, 1))); ?></div>
                    <span class="user-name"><?php echo htmlspecialchars($user_name); ?></span>
                    <i class="bi bi-chevron-down dropdown-arrow"></i>
                </div>
                <div class="user-dropdown-menu">
                    <a href="profile" class="dropdown-item">
                        <i class="bi bi-person"></i>
                        <span>Profile</span>
                    </a>
                    <a href="settings" class="dropdown-item">
                        <i class="bi bi-gear"></i>
                        <span>Settings</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="signin?logout=true" class="dropdown-item">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

<nav class="sidebar-nav" id="sidebarNav">
            <div class="nav-section">
                <div class="nav-title">Main</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="crmdashboard" class="nav-link">
                            <i class="bi bi-speedometer2"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="dashboard" class="nav-link">
                            <i class="bi bi-grid-1x2-fill"></i>
                            <span>Client</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="projectlist" class="nav-link">
                            <i class="bi bi-list-ul"></i>
                            <span>Project List</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="designimages" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Design images</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="assignmentcalendar" class="nav-link">
                            <i class="bi bi-calendar-event-fill"></i>
                            <span>Assignment Calendar</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="<?= BASE_URL ?>place_order" class="nav-link">
                            <i class="bi bi-cart-check"></i> 
                            <span>Place Order</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="financetracker" class="nav-link">
                            <i class="bi bi-cash-stack"></i>
                            <span>Finance Tracker</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="imagepin" class="nav-link">
                            <i class="bi bi-pin-map-fill"></i>
                            <span>Image Pin & Comment</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="designcost" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Designs Cost</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="nav-section">
                <div class="nav-title">Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="taskmanager" class="nav-link">
                            <i class="bi bi-check2-square"></i>
                            <span>Task Manager</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="users" class="nav-link">
                            <i class="bi bi-people-fill"></i>
                            <span>Users</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            
            
            <div class="nav-section">
                <div class="nav-title">Vendor Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="addvendors" class="nav-link active">
                            <i class="bi bi-person-plus-fill"></i>
                            <span>Add New Vendor</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="viewvendors" class="nav-link">
                            <i class="bi bi-card-list"></i>
                            <span>View All Vendors</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

<div class="content-wrapper">
            
            <div class="content-header">
                <h1 class="page-title">Add New Vendor</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Management</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Vendor Management</li>
                    </ol>
                </nav>
            </div>

<div class="main-content">
                
                <div class="form-container">
                    <div class="form-header">
                        <i class="bi bi-person-plus-fill"></i>
                        <h2 class="form-title">Register New Vendor</h2>
                    </div>
                    <div class="form-body">
                        <?php if ($message): ?>
                        <div class="alert alert-<?= $message_type ?>" role="alert">
                            <?= htmlspecialchars($message) ?>
                        </div>
                        <?php endif; ?>
                        
<form id="vendor-form" method="POST" action="addvendors" enctype="multipart/form-data">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="vendor_name" class="form-label">
                                            <i class="bi bi-building"></i>
                                            Vendor/Company Name
                                        </label>
                                        <input type="text" class="form-control" id="vendor_name" name="vendor_name" required placeholder="e.g., Prime Steel Corp">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="contact_person" class="form-label">
                                            <i class="bi bi-person"></i>
                                            Primary Contact Person
                                        </label>
                                        <input type="text" class="form-control" id="contact_person" name="contact_person" required placeholder="e.g., Sarah Chen">
                                    </div>
                                </div>
                            </div>

<div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone" class="form-label">
                                            <i class="bi bi-telephone"></i>
                                            Phone Number
                                        </label>
                                        <input type="tel" class="form-control" id="phone" name="phone" required placeholder="+91 9876543210">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email" class="form-label">
                                            <i class="bi bi-envelope"></i>
                                            Email Address
                                        </label>
                                        <input type="email" class="form-control" id="email" name="email" placeholder="contact@primesteel.com">
                                    </div>
                                </div>
                            </div>

<div class="form-group">
                                <label for="category" class="form-label">
                                    <i class="bi bi-tags"></i>
                                    Service Category
                                </label>
                                <select class="form-select" id="category" name="category" required>
                                    <option value="" disabled selected>Select Service Type</option>
                                    <?php foreach ($vendor_categories as $cat): ?>
                                        <option value="<?= $cat ?>"><?= $cat ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

<div class="form-group">
                                <label class="form-label">
                                    <i class="bi bi-star-fill"></i>
                                    Vendor Rating
                                </label>
                                <div class="star-rating-container">
                                    <div class="star-rating" id="starRating">
                                        <i class="bi bi-star-fill star" data-rating="1"></i>
                                        <i class="bi bi-star-fill star" data-rating="2"></i>
                                        <i class="bi bi-star-fill star" data-rating="3"></i>
                                        <i class="bi bi-star-fill star" data-rating="4"></i>
                                        <i class="bi bi-star-fill star" data-rating="5"></i>
                                    </div>
                                    <div class="rating-info">
                                        <span class="rating-text" id="ratingText">Click to rate vendor</span>
                                        <span class="rating-value" id="ratingValue"></span>
                                    </div>
                                </div>
                                <input type="hidden" id="rating" name="rating" value="">
                            </div>

<div class="form-group">
                                <label for="payment_terms" class="form-label">
                                    <i class="bi bi-credit-card"></i>
                                    Payment Terms
                                </label>
                                <input type="text" class="form-control" id="payment_terms" name="payment_terms" required placeholder="e.g., Net 30 days">
                            </div>

<div class="form-group">
                                <label for="address" class="form-label">
                                    <i class="bi bi-geo-alt"></i>
                                    Billing/Physical Address
                                </label>
<textarea class="form-control" id="address" name="address" rows="3" required placeholder="Street Address, City, State/Province, Zip Code"></textarea>
                            </div>

<div class="form-group">
                                <label for="material_kit_given" class="form-label">
                                    <i class="bi bi-box-seam"></i>
                                    Material Kit Given
                                </label>
                                <select class="form-select" id="material_kit_given" name="material_kit_given" required>
                                    <option value="" disabled selected>Select Option</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>

<div class="form-group" id="location-details-group" style="display: none;">
                                <label for="location_details" class="form-label">
                                    <i class="bi bi-geo"></i>
                                    Location Details <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="location_details" name="location_details" placeholder="e.g., Cupboard number, box number, rack, etc.">
                                <small class="text-muted">Enter the specific location where the material kit is stored</small>
                            </div>

<div class="form-group" id="material-kit-image-group" style="display: none;">
                                <label for="material_kit_image" class="form-label">
                                    <i class="bi bi-image"></i>
                                    Material Kit Image <span class="text-danger">*</span>
                                </label>
                                <input type="file" class="form-control" id="material_kit_image" name="material_kit_image" accept=".jpg,.jpeg,.png">
                                <small class="text-muted">Upload an image (JPG, JPEG, PNG) - Max 5MB</small>
                            </div>

<div class="text-center mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save-fill"></i>
                                    Register Vendor
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Star rating functionality
        stars.forEach((star, index) => {
            star.addEventListener('click', function() {
                currentRating = index + 1;
                ratingInput.value = currentRating;
                updateStars(currentRating);
                updateRatingText(currentRating);
            });
            
            star.addEventListener('mouseenter', function() {
                const hoverRating = index + 1;
                updateStars(hoverRating, true);
                updateRatingText(hoverRating);
            });
        });
        
        // Reset stars when not hovering
        document.getElementById('starRating').addEventListener('mouseleave', function() {
            updateStars(currentRating);
            updateRatingText(currentRating);
        });
        
        function updateStars(rating, isHover = false) {
            stars.forEach((star, index) => {
                star.classList.remove('filled', 'hover');
                if (index < rating) {
                    if (isHover) {
                        star.classList.add('hover');
                    } else {
                        star.classList.add('filled');
                    }
                }
            });
        }
        
        function updateRatingText(rating) {
            if (rating > 0) {
                ratingText.textContent = ratingTexts[rating];
                ratingValue.textContent = `${rating}/5`;
                ratingValue.classList.add('show');
            } else {
                ratingText.textContent = 'Click to rate vendor';
                ratingValue.classList.remove('show');
            }
        }

vendorForm.addEventListener('submit', function(event) {
            // Ensure rating is selected
            if (!ratingInput.value) {
                event.preventDefault();
                alert('Please select a vendor rating');
                return false;
            }
            
            // Form will submit normally to server
            // Client-side validation is handled by HTML5 required attributes
        });

// --- Mobile Menu Toggle ---
        mobileMenuToggle.addEventListener('click', () => {
            sidebarNav.classList.toggle('show');
            overlay.classList.toggle('show');
        });

overlay.addEventListener('click', () => {
            sidebarNav.classList.remove('show');
            overlay.classList.remove('show');
        });

// --- User Dropdown Toggle ---
        userProfile.addEventListener('click', (e) => {
            e.stopPropagation();
            userDropdown.classList.toggle('show');
        });

document.addEventListener('click', () => {
            userDropdown.classList.remove('show');
        });

// --- Material Kit Fields Show/Hide Logic ---
        const materialKitGiven = document.getElementById('material_kit_given');
        const locationDetailsGroup = document.getElementById('location-details-group');
        const materialKitImageGroup = document.getElementById('material-kit-image-group');
        const locationDetailsInput = document.getElementById('location_details');
        const materialKitImageInput = document.getElementById('material_kit_image');

materialKitGiven.addEventListener('change', function() {
            if (this.value === 'Yes') {
                // Show location details and image upload
                locationDetailsGroup.style.display = 'block';
                materialKitImageGroup.style.display = 'block';
                // Make fields required
                locationDetailsInput.setAttribute('required', 'required');
                materialKitImageInput.setAttribute('required', 'required');
            } else if (this.value === 'No') {
                // Hide and remove required attributes
                locationDetailsGroup.style.display = 'none';
                materialKitImageGroup.style.display = 'none';
                locationDetailsInput.removeAttribute('required');
                materialKitImageInput.removeAttribute('required');
                // Clear values
                locationDetailsInput.value = '';
                materialKitImageInput.value = '';
            }
        });

// File type validation for Material Kit Image
        materialKitImageInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const fileName = file.name;
                const fileExt = fileName.split('.').pop().toLowerCase();
                const allowedExts = ['jpg', 'jpeg', 'png'];
                
                if (!allowedExts.includes(fileExt)) {
                    alert('Invalid file type. Please upload a JPG, JPEG, or PNG file.');
                    this.value = ''; // Clear the input
                }
                
                // Check file size (5MB max)
                if (file.size > 5 * 1024 * 1024) {
                    alert('File size exceeds 5MB limit. Please upload a smaller file.');
                    this.value = ''; // Clear the input
                }
            }
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: addvendors.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation