based on this (-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1:3306
-- Generation Time: Nov 15, 2024 at 12:12 PM
-- Server version: 10.11.9-MariaDB
-- PHP Version: 7.2.34

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `u406552082_kaakalia`
--

-- --------------------------------------------------------

--
-- Table structure for table `ads`
--

CREATE TABLE `ads` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `ad_type` enum('Post','Story') NOT NULL,
  `related_id` int(11) NOT NULL,
  `budget` decimal(10,2) NOT NULL,
  `total_spent` decimal(10,2) DEFAULT 0.00,
  `start_date` date NOT NULL,
  `end_date` date NOT NULL,
  `status` enum('Active','Paused','Completed') DEFAULT 'Active',
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `ads`
--

INSERT INTO `ads` (`id`, `user_id`, `name`, `ad_type`, `related_id`, `budget`, `total_spent`, `start_date`, `end_date`, `status`, `created_at`, `updated_at`) VALUES
(4, 2, 'Helo', 'Post', 2, 20.00, 0.00, '2024-11-12', '2024-11-14', 'Active', '2024-11-11 09:37:40', '2024-11-11 09:37:40');

-- --------------------------------------------------------

--
-- Table structure for table `ad_spend_logs`
--

CREATE TABLE `ad_spend_logs` (
  `id` int(11) NOT NULL,
  `ad_id` int(11) NOT NULL,
  `amount` decimal(10,2) NOT NULL,
  `spend_date` datetime DEFAULT current_timestamp(),
  `description` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `customers`
--

CREATE TABLE `customers` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `contact` varchar(50) DEFAULT NULL,
  `delivery_address` text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `customers`
--

INSERT INTO `customers` (`id`, `name`, `contact`, `delivery_address`) VALUES
(1, 'Order_3121', '012345689', 'Qena'),
(2, 'order_3212', '51648963', 'Luxor'),
(3, 'Order_323', '01119235049', 'Qena, Egypt'),
(4, 'Order_3231', '0155648963', 'Luxor'),
(5, 'Order_3548464852', '0110215489', 'Qena'),
(6, 'Order_mahmoud', '50495049', 'Qena'),
(7, 'Ahmed', '01119235049', 'Assuit'),
(8, 'Mahmoud Tawfik', '01119235049', 'Qena, Center Qena'),
(9, 'Ahmed', '0101549463', 'Luxor'),
(10, 'Yossef', '0154949463', 'Aswan'),
(11, 'Mona', '0154984315', 'Qena'),
(12, 'Order_132323', '0119548463', 'CXA'),
(13, 'Mostafa', '154946123', 'Assuit'),
(14, 'Order_66960907', '+96566960907', 'kuwait'),
(15, 'Order_84569845', '+96584569845', 'Kuwait'),
(16, 'Order_84656222', '+96584656222', 'Mashrif'),
(17, 'Order_84549651', '+96584549651', 'Luxor'),
(18, 'Order_94531154', '+96594531154', 'Qena');

-- --------------------------------------------------------

--
-- Table structure for table `drivers`
--

CREATE TABLE `drivers` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `number` varchar(15) NOT NULL,
  `is_star` tinyint(1) DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `drivers`
--

INSERT INTO `drivers` (`id`, `name`, `number`, `is_star`) VALUES
(1, 'Fox توصيل', '+965 9944 6116', 1),
(2, 'Perfect M توصيل 3kd', '+965 555 72147', 0),
(3, 'توصيل ٥', '+965 505 02769', 0),
(4, 'Shipping Company توصيل Delivery', '+965 9940 7010', 0),
(5, 'توصيلكم توصيل Delivery', '+965 517 66244', 0),
(6, 'توصيل الكويت ٢', '+965 557 25712', 0),
(7, 'توصيل الكويت 2.5kd', '+965 6049 4960', 0),
(8, 'كلاسك توصيل', '+965 6969 1459', 0),
(9, 'سايق On Call5 Delivery Freelance', '+965 6698 8976', 0),
(10, 'سايق On Call 3 Delivery Freelance', '+965 555 86442', 0),
(11, 'سايق On Call 2 Delivery Freelance', '+965 555 12101', 0),
(12, 'Delivery توصيل', '+965 9851 8182', 1),
(13, 'Kumar Driver', '+965 6673 8688', 1),
(14, 'Pawan Driver', '+965 9733 1565', 0),
(15, 'توصيل - صلاح', '+965 6576 2337', 0);

-- --------------------------------------------------------

--
-- Table structure for table `notifications`
--

CREATE TABLE `notifications` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `type` enum('order','post','plan','note','ad') NOT NULL,
  `message` varchar(255) NOT NULL,
  `link` varchar(255) NOT NULL,
  `created_at` datetime DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `orders`
--

CREATE TABLE `orders` (
  `id` int(11) NOT NULL,
  `customer_id` int(11) NOT NULL,
  `status` enum('Pending','In Progress','Completed','Delivered') DEFAULT 'Pending',
  `priority` enum('Normal','Important','Quick') DEFAULT 'Normal',
  `order_date` datetime DEFAULT current_timestamp(),
  `delivery_datetime` datetime DEFAULT NULL,
  `delivery_date` date DEFAULT NULL,
  `delivery_fee` decimal(10,2) NOT NULL DEFAULT 0.00,
  `free_shipping` tinyint(1) NOT NULL DEFAULT 0,
  `is_paid` tinyint(1) NOT NULL DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `orders`
--

INSERT INTO `orders` (`id`, `customer_id`, `status`, `priority`, `order_date`, `delivery_datetime`, `delivery_date`, `delivery_fee`, `free_shipping`, `is_paid`) VALUES
(4, 4, 'Delivered', 'Normal', '2024-11-09 14:48:25', '2024-11-16 08:50:00', NULL, 0.00, 0, 0),
(5, 5, 'Delivered', 'Normal', '2024-11-09 18:28:01', '2024-11-10 09:00:00', NULL, 0.00, 0, 0),
(6, 6, 'Delivered', 'Important', '2024-11-12 09:49:43', '2024-11-13 16:00:00', NULL, 0.00, 0, 0),
(8, 8, 'Delivered', 'Important', '2024-11-12 17:57:16', '2024-11-13 12:00:00', NULL, 0.00, 0, 0),
(9, 9, 'Delivered', 'Important', '2024-11-12 18:16:47', '2024-11-13 15:00:00', NULL, 1.00, 0, 0),
(10, 10, 'Pending', 'Quick', '2024-11-12 18:50:43', '2024-11-13 18:00:00', NULL, 0.00, 0, 0),
(12, 12, 'Pending', 'Quick', '2024-11-13 12:25:55', NULL, NULL, 0.00, 1, 0),
(17, 17, 'Pending', 'Important', '2024-11-14 22:49:41', '2024-11-16 12:00:00', NULL, 1.00, 0, 1),
(18, 18, 'Pending', 'Important', '2024-11-14 23:03:27', '2024-11-16 14:00:00', NULL, 1.00, 0, 1);

-- --------------------------------------------------------

--
-- Table structure for table `order_items`
--

CREATE TABLE `order_items` (
  `id` int(11) NOT NULL,
  `order_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL DEFAULT 1,
  `packaging_preferences` varchar(255) DEFAULT NULL,
  `discount_percentage` decimal(5,2) DEFAULT 0.00,
  `discount_reason` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `order_items`
--

INSERT INTO `order_items` (`id`, `order_id`, `product_id`, `quantity`, `packaging_preferences`, `discount_percentage`, `discount_reason`) VALUES
(5, 4, 8, 1, 'This Order type one Mahmoud Tawfik', 0.00, '<br /><b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/home/u406552082/domains/longevacare.com/public_html/kaakalia/public/orders/edit_order.php</b> on line <b>692</b><br />'),
(6, 5, 2, 1, '0', 20.00, 'خصم مشرف'),
(7, 4, 6, 2, 'Add Card on it', 30.00, ''),
(8, 6, 6, 1, '0', 0.00, NULL),
(10, 8, 2, 2, 'add Card on box, this card is &quot;Mahmoud Tawfik&quot;', 30.00, 'خصم المشرف'),
(11, 9, 7, 1, 'type on \"Mahmoud\"', 0.00, '<br /><b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/home/u406552082/domains/longevacare.com/public_html/kaakalia/public/orders/edit_order.php</b> on line <b>749</b><br />'),
(12, 10, 3, 1, 'Type: Mahmoud Tawfik', 0.00, NULL),
(14, 12, 8, 5, '', 0.00, ''),
(19, 12, 8, 1, '0', 0.00, '0'),
(20, 17, 6, 1, '', 30.00, 'خصم مشرف'),
(21, 17, 5, 2, '0', 25.00, '0'),
(22, 18, 7, 1, 'Add Card, Mahmoud', 30.00, 'خصم المشرف'),
(23, 18, 1, 1, 'Add Card, Ahmed', 30.00, 'خصم المشرف'),
(24, 18, 5, 1, 'Add Card, ASC', 30.00, '0');

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `size` varchar(50) DEFAULT NULL,
  `price` decimal(10,2) NOT NULL,
  `category` varchar(50) DEFAULT NULL,
  `thumbnail` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `name`, `size`, `price`, `category`, `thumbnail`) VALUES
(1, 'Shabora', 'Half Kilo', 6.00, 'Cakes', NULL),
(2, 'Shabora', 'One Kilo', 8.00, 'Cakes', NULL),
(3, 'Shabora', 'Small Basket', 8.00, 'Cakes', NULL),
(4, 'Shabora', 'Large Basket', 10.00, 'Cakes', NULL),
(5, 'Shabora', 'Presentation Plate (Ivory)', 14.00, 'Cakes', NULL),
(6, 'Mahalbiya Crunch', '12 Pieces', 12.00, 'Desserts', NULL),
(7, 'Monkey Bread', 'Large', 12.00, 'Breads', NULL),
(8, 'Monkey Bread Mini', '12 Pieces', 6.00, 'Breads', NULL),
(9, 'Monkey Bread Mini', '9 Pieces', 9.00, 'Breads', NULL),
(11, 'Monkey Bread', 'Presentation Plate', 16.00, 'Breads', NULL);

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `email` varchar(100) DEFAULT NULL,
  `password` varchar(255) NOT NULL,
  `role` enum('admin','staff') NOT NULL,
  `profile_image` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `workspace_notes`
--

CREATE TABLE `workspace_notes` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `content` text NOT NULL,
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `workspace_notes`
--

INSERT INTO `workspace_notes` (`id`, `user_id`, `title`, `content`, `created_at`, `updated_at`) VALUES
(2, 2, 'This important notes', 'HaloHaloHaloHaloHaloHaloHaloHaloHaloHalo', '2024-11-11 09:37:10', '2024-11-11 09:37:10');

-- --------------------------------------------------------

--
-- Table structure for table `workspace_plans`
--

CREATE TABLE `workspace_plans` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `audio_path` varchar(255) DEFAULT NULL,
  `due_date` datetime DEFAULT NULL,
  `status` enum('Not Started','In Progress','Completed') DEFAULT 'Not Started',
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  `priority` enum('Normal','Important','Critical') NOT NULL DEFAULT 'Normal'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `workspace_posts`
--

CREATE TABLE `workspace_posts` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `platform` enum('Instagram','Facebook','Twitter','Other') NOT NULL,
  `content` text NOT NULL,
  `media_url` varchar(255) DEFAULT NULL,
  `scheduled_datetime` datetime DEFAULT NULL,
  `status` enum('Scheduled','Posted','Failed') DEFAULT 'Scheduled',
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  `type` enum('Post','Story') DEFAULT 'Post'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `workspace_posts`
--

INSERT INTO `workspace_posts` (`id`, `user_id`, `platform`, `content`, `media_url`, `scheduled_datetime`, `status`, `created_at`, `updated_at`, `type`) VALUES
(2, 1, 'Instagram', 'Hello', NULL, '2024-11-11 01:19:00', 'Scheduled', '2024-11-10 11:16:10', '2024-11-10 11:16:10', 'Post');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `ads`
--
ALTER TABLE `ads`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`),
  ADD KEY `related_id` (`related_id`);

--
-- Indexes for table `ad_spend_logs`
--
ALTER TABLE `ad_spend_logs`
  ADD PRIMARY KEY (`id`),
  ADD KEY `ad_id` (`ad_id`);

--
-- Indexes for table `customers`
--
ALTER TABLE `customers`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `drivers`
--
ALTER TABLE `drivers`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `notifications`
--
ALTER TABLE `notifications`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`),
  ADD KEY `created_at` (`created_at`);

--
-- Indexes for table `orders`
--
ALTER TABLE `orders`
  ADD PRIMARY KEY (`id`),
  ADD KEY `customer_id` (`customer_id`),
  ADD KEY `idx_orders_customer_id` (`customer_id`);

--
-- Indexes for table `order_items`
--
ALTER TABLE `order_items`
  ADD PRIMARY KEY (`id`),
  ADD KEY `order_id` (`order_id`),
  ADD KEY `product_id` (`product_id`),
  ADD KEY `idx_order_items_order_id` (`order_id`),
  ADD KEY `idx_order_items_product_id` (`product_id`);

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `username` (`username`);

--
-- Indexes for table `workspace_notes`
--
ALTER TABLE `workspace_notes`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- Indexes for table `workspace_plans`
--
ALTER TABLE `workspace_plans`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- Indexes for table `workspace_posts`
--
ALTER TABLE `workspace_posts`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `ads`
--
ALTER TABLE `ads`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT for table `ad_spend_logs`
--
ALTER TABLE `ad_spend_logs`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

--
-- AUTO_INCREMENT for table `customers`
--
ALTER TABLE `customers`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

--
-- AUTO_INCREMENT for table `drivers`
--
ALTER TABLE `drivers`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;

--
-- AUTO_INCREMENT for table `notifications`
--
ALTER TABLE `notifications`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `orders`
--
ALTER TABLE `orders`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

--
-- AUTO_INCREMENT for table `order_items`
--
ALTER TABLE `order_items`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=25;

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `workspace_notes`
--
ALTER TABLE `workspace_notes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

--
-- AUTO_INCREMENT for table `workspace_plans`
--
ALTER TABLE `workspace_plans`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=17;

--
-- AUTO_INCREMENT for table `workspace_posts`
--
ALTER TABLE `workspace_posts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

--
-- Constraints for dumped tables
--

--
-- Constraints for table `ads`
--
ALTER TABLE `ads`
  ADD CONSTRAINT `fk_ads_related_id` FOREIGN KEY (`related_id`) REFERENCES `workspace_posts` (`id`) ON DELETE CASCADE,
  ADD CONSTRAINT `fk_ads_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `ad_spend_logs`
--
ALTER TABLE `ad_spend_logs`
  ADD CONSTRAINT `fk_ad_spend_logs_ad_id` FOREIGN KEY (`ad_id`) REFERENCES `ads` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `notifications`
--
ALTER TABLE `notifications`
  ADD CONSTRAINT `notifications_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `orders`
--
ALTER TABLE `orders`
  ADD CONSTRAINT `fk_orders_customer_id` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  ADD CONSTRAINT `orders_ibfk_1` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `order_items`
--
ALTER TABLE `order_items`
  ADD CONSTRAINT `fk_order_items_order_id` FOREIGN KEY (`order_id`) REFERENCES `orders` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  ADD CONSTRAINT `fk_order_items_product_id` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  ADD CONSTRAINT `order_items_ibfk_1` FOREIGN KEY (`order_id`) REFERENCES `orders` (`id`) ON DELETE CASCADE,
  ADD CONSTRAINT `order_items_ibfk_2` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `workspace_notes`
--
ALTER TABLE `workspace_notes`
  ADD CONSTRAINT `fk_workspace_notes_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `workspace_plans`
--
ALTER TABLE `workspace_plans`
  ADD CONSTRAINT `fk_workspace_plans_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `workspace_posts`
--
ALTER TABLE `workspace_posts`
  ADD CONSTRAINT `fk_workspace_posts_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;) i want to update this codes (<?php
// drivers_list.php

// Include authentication, database connection, and functions
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/db_connect.php';
require_once __DIR__ . '/../../includes/functions.php';

// Start session to handle flash messages
session_start();

// Initialize variables for messages
$errors = [];
$success = "";

// Now include the header AFTER form handling
require_once '../../includes/header.php';

// Retrieve flash messages from session
if (isset($_SESSION['success'])) {
    $success = $_SESSION['success'];
    unset($_SESSION['success']);
}

if (isset($_SESSION['errors']) && !empty($_SESSION['errors'])) {
    $errors = $_SESSION['errors'];
    unset($_SESSION['errors']);
}

// Handle Form Submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Handle Add New Driver
    if (isset($_POST['add_driver'])) {
        $name = trim($_POST['name']);
        $number = trim($_POST['number']);
        $is_star = isset($_POST['is_star']) ? intval($_POST['is_star']) : 0;

        // Basic validation
        if (empty($name) || empty($number)) {
            $errors[] = "Driver name and number are required.";
        } else {
            // Insert into database using prepared statements to prevent SQL injection
            $stmt = $conn->prepare("INSERT INTO drivers (name, number, is_star) VALUES (?, ?, ?)");
            if ($stmt) {
                $stmt->bind_param("ssi", $name, $number, $is_star);
                if ($stmt->execute()) {
                    $_SESSION['success'] = "New driver added successfully.";
                } else {
                    $errors[] = "Error adding driver: " . htmlspecialchars($stmt->error, ENT_QUOTES, 'UTF-8');
                }
                $stmt->close();
            } else {
                $errors[] = "Database error: Unable to prepare statement.";
            }
        }
        // Redirect to avoid form resubmission
        $_SESSION['errors'] = $errors;
        header("Location: drivers_list.php");
        exit();
    }

    // Handle Toggle Star Status
    if (isset($_POST['toggle_star'])) {
        $driver_id = intval($_POST['id']);
        $new_star_status = intval($_POST['is_star']); // Expected 0 or 1

        if ($driver_id > 0 && in_array($new_star_status, [0, 1])) {
            $stmt = $conn->prepare("UPDATE drivers SET is_star = ? WHERE id = ?");
            if ($stmt) {
                $stmt->bind_param("ii", $new_star_status, $driver_id);
                if ($stmt->execute()) {
                    $status = $new_star_status ? 'starred as important' : 'unstarred';
                    $_SESSION['success'] = "Driver successfully $status.";
                } else {
                    $errors[] = "Error updating star status: " . htmlspecialchars($stmt->error, ENT_QUOTES, 'UTF-8');
                }
                $stmt->close();
            } else {
                $errors[] = "Database error: Unable to prepare statement.";
            }
        } else {
            $errors[] = "Invalid driver ID or star status.";
        }
        // Redirect to avoid form resubmission
        $_SESSION['errors'] = $errors;
        header("Location: drivers_list.php");
        exit();
    }
}

// Function to format phone numbers for WhatsApp links
function formatPhoneNumberForWhatsApp($number)
{
    // Strip out non-numeric characters
    return preg_replace('/\D/', '', $number);
}

// Fetch drivers from the database with optional search and sorting
$search = isset($_GET['search']) ? trim($_GET['search']) : '';
$filter_star = isset($_GET['filter_star']) ? intval($_GET['filter_star']) : 0; // 1 to filter starred drivers
$sort = isset($_GET['sort']) ? trim($_GET['sort']) : 'star_desc';

// Determine sorting order
switch ($sort) {
    case 'name_asc':
        $order_by = 'name ASC';
        break;
    case 'name_desc':
        $order_by = 'name DESC';
        break;
    case 'number_asc':
        $order_by = 'number ASC';
        break;
    case 'number_desc':
        $order_by = 'number DESC';
        break;
    case 'star_asc':
        $order_by = 'is_star ASC, name ASC'; // Non-starred first
        break;
    case 'star_desc':
    default:
        $order_by = 'is_star DESC, name ASC'; // Starred first
}

// Prepare the SQL statement
if (!empty($search)) {
    // Use prepared statements to prevent SQL injection
    $stmt = $conn->prepare("SELECT * FROM drivers WHERE (name LIKE ? OR number LIKE ?) " . ($filter_star ? "AND is_star = 1 " : "") . "ORDER BY $order_by");
    if ($stmt) {
        $like_search = '%' . $search . '%';
        $stmt->bind_param("ss", $like_search, $like_search);
    } else {
        die('Database error: ' . htmlspecialchars(mysqli_error($conn), ENT_QUOTES, 'UTF-8'));
    }
} else {
    $stmt = $conn->prepare("SELECT * FROM drivers " . ($filter_star ? "WHERE is_star = 1 " : "") . "ORDER BY $order_by");
    if (!$stmt) {
        die('Database error: ' . htmlspecialchars(mysqli_error($conn), ENT_QUOTES, 'UTF-8'));
    }
}

// Execute the statement and fetch results
$stmt->execute();
$result = $stmt->get_result();
if (!$result) {
    die('Query failed: ' . htmlspecialchars(mysqli_error($conn), ENT_QUOTES, 'UTF-8'));
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drivers List</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome for Icons -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <!-- Custom Styles -->
    <style>
        /* Custom Modal Styles */
        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 50;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.5);
            /* Black w/ opacity */
        }

        .modal-content {
            background-color: white;
            margin: 5%;
            /* 5% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 500px;
            /* Could be more or less, depending on screen size */
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
        }

        /* Tooltip Styles */
        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 160px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -80px;

            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /* Enhanced Star Icon Styles */
        .star-btn {
            transition: color 0.3s, transform 0.2s;
        }

        .star-btn:hover {
            transform: scale(1.2);
        }

        /* Switch Toggle Styles for Edit Driver */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #4ADE80;
        }

        input:checked+.slider:before {
            transform: translateX(26px);
        }

        /* Responsive Grid */
        @media (max-width: 640px) {
            #driversGrid {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }
        }

        /* Add Driver Button Hover Effect */
        #addDriverBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row items-center justify-between mb-6">
            <h2 class="text-3xl font-bold text-gray-800">Drivers List</h2>
            <div class="flex items-center space-x-4 mt-4 md:mt-0">
                <button id="toggleStarred" class="bg-yellow-400 text-gray-800 px-4 py-2 rounded-md shadow hover:bg-yellow-300 transition flex items-center">
                    <?php if ($filter_star): ?>
                        <i class="fas fa-star mr-2"></i> Show All
                    <?php else: ?>
                        <i class="far fa-star mr-2"></i> Show Starred
                    <?php endif; ?>
                </button>
                <button id="addDriverBtn" class="bg-indigo-600 text-white px-4 py-2 rounded-md shadow hover:bg-indigo-700 transition flex items-center">
                    <i class="fas fa-plus mr-2"></i> Add Driver
                </button>
            </div>
        </div>

        <!-- Filter and Search Section -->
        <div class="flex flex-col md:flex-row items-center justify-between mb-6">
            <form method="GET" action="drivers_list.php" id="searchForm" class="flex flex-col md:flex-row items-center w-full md:w-auto space-y-4 md:space-y-0">
                <div class="flex items-center border border-gray-300 rounded-md overflow-hidden">
                    <input type="text" name="search" id="searchInput" placeholder="Search by name or number..." value="<?= htmlspecialchars($search, ENT_QUOTES, 'UTF-8') ?>" class="w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex items-center space-x-4">
                    <select name="sort" id="sortSelect" onchange="this.form.submit()" class="px-4 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="star_desc" <?= ($sort === 'star_desc') ? 'selected' : '' ?>>Starred First</option>
                        <option value="star_asc" <?= ($sort === 'star_asc') ? 'selected' : '' ?>>Starred Last</option>
                        <option value="name_asc" <?= ($sort === 'name_asc') ? 'selected' : '' ?>>Sort by Name (A-Z)</option>
                        <option value="name_desc" <?= ($sort === 'name_desc') ? 'selected' : '' ?>>Sort by Name (Z-A)</option>
                        <option value="number_asc" <?= ($sort === 'number_asc') ? 'selected' : '' ?>>Sort by Number (Ascending)</option>
                        <option value="number_desc" <?= ($sort === 'number_desc') ? 'selected' : '' ?>>Sort by Number (Descending)</option>
                        <option value="recent_desc" <?= ($sort === 'recent_desc') ? 'selected' : '' ?>>Recently Added</option>
                        <option value="recent_asc" <?= ($sort === 'recent_asc') ? 'selected' : '' ?>>Oldest Added</option>
                    </select>
                    <button type="submit" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition">Search</button>
                </div>
            </form>
        </div>

        <!-- Success and Error Messages -->
        <?php if (!empty($success)): ?>
            <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                <span class="block sm:inline"><?= htmlspecialchars($success, ENT_QUOTES, 'UTF-8') ?></span>
                <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
                    <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <title>Close</title>
                        <path
                            d="M14.348 5.652a1 1 0 00-1.414 0L10 8.586 7.066 5.652a1 1 0 10-1.414 1.414L8.586 10l-2.934 2.934a1 1 0 101.414 1.414L10 11.414l2.934 2.934a1 1 0 001.414-1.414L11.414 10l2.934-2.934a1 1 0 000-1.414z" />
                    </svg>
                </span>
            </div>
        <?php endif; ?>

        <?php if (!empty($errors)): ?>
            <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                <ul class="list-disc pl-5">
                    <?php foreach ($errors as $error): ?>
                        <li><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></li>
                    <?php endforeach; ?>
                </ul>
                <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
                    <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20">
                        <title>Close</title>
                        <path
                            d="M14.348 5.652a1 1 0 00-1.414 0L10 8.586 7.066 5.652a1 1 0 10-1.414 1.414L8.586 10l-2.934 2.934a1 1 0 101.414 1.414L10 11.414l2.934 2.934a1 1 0 001.414-1.414L11.414 10l2.934-2.934a1 1 0 000-1.414z" />
                    </svg>
                </span>
            </div>
        <?php endif; ?>

        <!-- Drivers Grid -->
        <div id="driversGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            <?php if ($result->num_rows > 0): ?>
                <?php while ($row = $result->fetch_assoc()): ?>
                    <?php
                        // Determine background color based on is_star
                        $bg_color = $row['is_star'] ? 'bg-red-200' : 'bg-white';
                    ?>
                    <div class="rounded-lg shadow-md p-6 flex flex-col justify-between transform transition-transform hover:scale-105 <?= $bg_color ?>">
                        <div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2 flex items-center">
                                <?= htmlspecialchars($row['name'], ENT_QUOTES, 'UTF-8') ?>
                                <!-- Star Icon with Tooltip -->
                                <div class="tooltip ml-2">
                                    <form action="drivers_list.php" method="POST" class="inline">
                                        <input type="hidden" name="id" value="<?= htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8') ?>">
                                        <input type="hidden" name="is_star" value="<?= $row['is_star'] ? 0 : 1; ?>">
                                        <button type="submit" name="toggle_star" class="focus:outline-none star-btn">
                                            <?php if ($row['is_star']): ?>
                                                <i class="fas fa-star text-yellow-500 text-lg"></i>
                                            <?php else: ?>
                                                <i class="far fa-star text-gray-400 text-lg hover:text-yellow-500 transition-colors"></i>
                                            <?php endif; ?>
                                        </button>
                                        <span class="tooltiptext"><?= $row['is_star'] ? 'Unmark as Important' : 'Mark as Important' ?></span>
                                    </form>
                                </div>
                            </h3>
                            <p class="text-gray-600 mb-4 flex items-center">
                                <i class="fas fa-phone-alt mr-2 text-indigo-500"></i><?= htmlspecialchars($row['number'], ENT_QUOTES, 'UTF-8') ?>
                            </p>
                        </div>
                        <div class="mt-4 flex justify-between items-center">
                            <a href="https://wa.me/<?= formatPhoneNumberForWhatsApp($row['number']); ?>" target="_blank"
                                class="bg-green-500 text-white px-3 py-2 rounded-md flex items-center hover:bg-green-600 transition">
                                <i class="fab fa-whatsapp mr-2"></i> WhatsApp
                            </a>
                            <div class="flex space-x-2 items-center">
                                <a href="edit_driver.php?id=<?= htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8'); ?>"
                                    class="bg-blue-500 text-white px-3 py-2 rounded-md flex items-center hover:bg-blue-600 transition">
                                    <i class="fas fa-edit mr-2"></i> Edit
                                </a>
                                <form action="delete_driver.php" method="POST" onsubmit="return confirm('Are you sure you want to delete this driver?');"
                                    class="inline">
                                    <input type="hidden" name="id" value="<?= htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8'); ?>">
                                    <button type="submit" name="delete_driver"
                                        class="bg-red-500 text-white px-3 py-2 rounded-md flex items-center hover:bg-red-600 transition">
                                        <i class="fas fa-trash-alt mr-2"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php else: ?>
                <p class="col-span-full text-center text-gray-600">No drivers found.</p>
            <?php endif; ?>
        </div>

        <!-- Add Driver Modal -->
        <div id="addDriverModal" class="modal">
            <div class="modal-content">
                <span class="close" id="closeModal">&times;</span>
                <h2 class="text-2xl font-bold mb-4 text-gray-800">Add New Driver</h2>
                <form action="drivers_list.php" method="POST">
                    <div class="mb-4">
                        <label for="name" class="block text-gray-700">Driver Name</label>
                        <input type="text" id="name" name="name" required
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div class="mb-4">
                        <label for="number" class="block text-gray-700">Driver Number</label>
                        <input type="text" id="number" name="number" required placeholder="+1234567890"
                            class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div class="mb-6">
                        <label for="is_star" class="block text-gray-700">Important</label>
                        <div class="mt-2">
                            <input type="checkbox" id="is_star" name="is_star" value="1" class="mr-2">
                            <label for="is_star" class="text-gray-700">Mark as Important</label>
                        </div>
                    </div>
                    <div class="flex justify-end">
                        <button type="button" id="cancelBtn" class="bg-gray-500 text-white px-4 py-2 rounded-md mr-2 hover:bg-gray-600">Cancel</button>
                        <button type="submit" name="add_driver"
                            class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">Add Driver</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Include the footer -->
    <?php
    require_once '../../includes/footer.php';
    ?>

    <!-- JavaScript for Modal Functionality and Real-Time Search -->
    <script>
        // Modal Elements
        const modal = document.getElementById("addDriverModal");
        const addDriverBtn = document.getElementById("addDriverBtn");
        const closeModal = document.getElementById("closeModal");
        const cancelBtn = document.getElementById("cancelBtn");

        // Open the modal when the user clicks the Add Driver button
        addDriverBtn.onclick = function () {
            modal.style.display = "block";
        }

        // Close the modal when the user clicks on <span> (x)
        closeModal.onclick = function () {
            modal.style.display = "none";
        }

        // Close the modal when the user clicks on Cancel button
        cancelBtn.onclick = function () {
            modal.style.display = "none";
        }

        // Close the modal when the user clicks anywhere outside of the modal
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        // Real-Time Search Functionality
        const searchInput = document.getElementById('searchInput');

        searchInput.addEventListener('input', function () {
            // Debounce to prevent too many submissions
            clearTimeout(this.delay);
            this.delay = setTimeout(() => {
                document.getElementById('searchForm').submit();
            }, 500);
        });

        // Toggle Starred Drivers Filter
        const toggleStarredBtn = document.getElementById('toggleStarred');

        toggleStarredBtn.addEventListener('click', function () {
            const currentURL = new URL(window.location.href);
            const filterStar = currentURL.searchParams.get('filter_star') === '1' ? 0 : 1;
            currentURL.searchParams.set('filter_star', filterStar);
            // Reset search if filtering
            if (filterStar) {
                currentURL.searchParams.delete('search');
            }
            window.location.href = currentURL.toString();
        });
    </script>
</body>

</html>) and Page Styling and Design Description

1. Overall Aesthetic and Theme

Modern and Clean Design: The page is designed with a minimalistic aesthetic focused on simplicity and clarity, allowing users to engage with form elements without distractions. This promotes easy interaction and efficient data entry.
Color Palette:
Primary Colors: A soothing teal hue (#20B2AA) highlights key interactive elements like buttons and icons, establishing a sense of trust and professionalism.
Neutral Backgrounds: Soft gray tones (e.g., #f1f5f9 for scrollbar tracks) provide a balanced backdrop that enhances readability without overpowering content.
Accent Colors: Red tones draw attention to error messages, while green hues are used for success indicators, offering clear, visual feedback for various form states.
2. Layout and Structure

Container-Based Layout: The content is housed in a responsive container (container mx-auto p-6), maintaining alignment and spacing across screen sizes. Generous padding (p-6) prevents clutter, creating a comfortable visual structure.
Sectioning and Hierarchy: The form is divided into sections (e.g., Customer Details, Order Details), each within distinct, bordered blocks (bg-white rounded-lg shadow-lg p-6 mb-8), helping users navigate and logically organize information.
Responsive Grid System: Using Tailwind CSS's grid utilities, form fields adapt to different screen sizes, appearing side-by-side on large screens (md:flex-row md:space-x-6) and stacking vertically on smaller devices for better accessibility.
3. Typography and Text Styling

Font Choices: A clean, sans-serif font is used for readability. Tailwind CSS's default font settings ensure consistency.
Text Hierarchy:
Headings: Prominent headings (text-3xl font-bold text-teal-600) guide users through sections.
Labels and Instructions: Labels use medium font weights (font-medium text-gray-700) for clarity, with additional descriptions styled smaller and gray for non-disruptive guidance.
4. Form Elements and Inputs

Input Fields:
Consistent Styling: Uniform styling across inputs (rounded-md border-gray-300 with focus states like focus:ring-teal-500 focus:border-teal-500) creates a cohesive user experience.
Padding and Sizing: Sufficient padding (p-2) enhances readability and interaction.
Buttons:
Primary Actions: Bold-colored buttons (bg-teal-500 rounded-lg) with hover effects (hover:bg-teal-600) provide visual feedback.
Icon Integration: Using icons (via Bootstrap Icons) next to button labels aids in clarity, making functions intuitive.
Checkboxes and Radio Buttons:
Customized Appearance: Consistent sizing and color accents (text-teal-600) make these elements noticeable without overwhelming the design.
5. Interactive Elements and Enhancements

Dynamic Form Rows: Animated transitions for adding/removing product rows (shadow-md) keep changes smooth and visually coherent.
Tooltips: Small icons (bi-question-circle) with tooltips provide guidance on hover, helping users without adding clutter. Tooltips have dark backgrounds and smooth animations.
6. Notifications and Alerts

Feedback Messages:
Error Messages: Styled with red tones (bg-red-100, border-red-400, text-red-700), they are prominent and actionable.
Success Messages: Green styling (bg-green-100, border-green-400, text-green-700) reinforces positive actions.
Iconography: Icons (bi-exclamation-triangle-fill for errors, bi-check-circle-fill for successes) enhance message clarity.
7. Scrollbar Customization

Aesthetic Scrollbars: Styled with narrow widths (8px) and rounded edges, ensuring they are functional but not intrusive. Colors align with the main scheme, and the thumb color changes on hover for feedback.
8. Buttons and Interactive Controls

Add and Remove Buttons: Both buttons are consistently designed with background colors, text colors, padding, and hover effects, making the interface predictable.
Icon Usage: Icons (e.g., bi-plus-circle-fill for adding, bi-trash-fill for removing) clarify actions.
9. Date and Time Picker Integration

Enhanced User Input: Integrate the Flatpickr library for date and time selection (#delivery_datetime), offering users an intuitive interface that matches other form styles.
Keyboard Accessibility: Designed to be keyboard-friendly, accommodating all users.
10. Footer Design

Subtle Footer: The footer uses soft gray tones (text-gray-600), ensuring it provides information without detracting from the main content.
11. Responsive Design and Mobile Optimization

Adaptive Layouts: Tailwind CSS responsive utilities ensure layout flexibility across devices.
Touch-Friendly Elements: Adequate sizing and spacing facilitate easy touchscreen interaction.
12. Accessibility Features

Semantic HTML: Elements like <label>, <input>, and <button> are used correctly to support assistive technologies.
Focus States: Interactive elements have clear focus states (focus:ring-teal-500 focus:border-teal-500) for keyboard navigation.
13. Consistent Spacing and Sizing

Whitespace Utilization: Generous margins (mb-6, mt-4) and padding (p-4, p-6) create visual balance.
Element Sizing: Uniform element sizing promotes a well-organized, professional appearance.
14. Visual Hierarchy and Emphasis

Clear Hierarchy: Larger, bolder fonts in headings guide users through sections.
Emphasized Labels: Important fields are marked with an asterisk (<span class="text-red-500">*</span>), drawing attention without overwhelming.
15. Interactive Feedback and Animations

Hover and Focus Effects: Color changes on hover (hover:bg-teal-600, hover:bg-red-600) provide feedback.
Smooth Transitions: Transition effects (transition duration-300) enhance user experience.
16. Iconography and Visual Cues

Bootstrap Icons Integration: Icons are sized and colored consistently (text-gray-400 text-sm for tooltips), ensuring they enhance without disrupting design.
17. Enhanced User Guidance

Tooltip Descriptions: Tooltips provide context-sensitive help, available only when needed to maintain a clean interface.
and type full codes