<?php
require_once 'includes/header.php';
$page_title = 'بحث عن الفاتورة';
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $page_title ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        :root {
            /* Modern Color Palette */
            --primary: #3B82F6;
            --primary-light: #93C5FD;
            --primary-dark: #1D4ED8;

            --secondary: #EC4899;
            --secondary-light: #F9A8D4;
            --secondary-dark: #BE185D;

            --success: #10B981;
            --success-light: #6EE7B7;
            --success-dark: #047857;

            --warning: #F59E0B;
            --warning-light: #FCD34D;
            --warning-dark: #B45309;

            --danger: #EF4444;
            --danger-light: #FCA5A5;
            --danger-dark: #B91C1C;

            --info: #06B6D4;
            --info-light: #67E8F9;
            --info-dark: #0E7490;

            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --gray-500: #6B7280;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --gray-900: #111827;

            --white: #FFFFFF;
            --black: #000000;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
            --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.2);
            --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

            --rounded-sm: 0.125rem;
            --rounded: 0.25rem;
            --rounded-md: 0.375rem;
            --rounded-lg: 0.5rem;
            --rounded-xl: 0.75rem;
            --rounded-2xl: 1rem;
            --rounded-3xl: 1.5rem;
            --rounded-full: 9999px;

            --transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            --font-sans: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        [data-theme="dark"] {
            --primary: #60A5FA;
            --primary-light: #1E40AF;
            --primary-dark: #93C5FD;

            --secondary: #F472B6;
            --secondary-light: #831843;
            --secondary-dark: #F9A8D4;

            --success: #34D399;
            --success-light: #065F46;
            --success-dark: #6EE7B7;

            --warning: #FBBF24;
            --warning-light: #92400E;
            --warning-dark: #FCD34D;

            --danger: #F87171;
            --danger-light: #7F1D1D;
            --danger-dark: #FCA5A5;

            --info: #22D3EE;
            --info-light: #155E75;
            --info-dark: #67E8F9;

            --gray-50: #111827;
            --gray-100: #1F2937;
            --gray-200: #374151;
            --gray-300: #4B5563;
            --gray-400: #6B7280;
            --gray-500: #9CA3AF;
            --gray-600: #D1D5DB;
            --gray-700: #E5E7EB;
            --gray-800: #F3F4F6;
            --gray-900: #F9FAFB;

            --white: #1F2937;
            --black: #F9FAFB;
        }

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

        body {
            font-family: var(--font-sans);
            background-color: var(--gray-50);
            color: var(--gray-800);
            line-height: 1.6;
            min-height: 100vh;
            transition: var(--transition-slow);
            overflow-x: hidden;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Header Styles */
        header {
            background-color: var(--white);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            padding: 10px;
            border-radius: 9px;
            margin-bottom: 30px;
            z-index: 1000;
            border-bottom: 1px solid var(--gray-200);
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo {
            height: 40px;
            width: auto;
            transition: var(--transition);
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--gray-600);
            font-size: 0.85rem;
            transition: var(--transition);
            position: relative;
        }

        .nav-link i {
            font-size: 1.25rem;
            margin-bottom: 0.25rem;
            transition: var(--transition);
        }

        .nav-link:hover {
            color: var(--primary);
            transform: translateY(-2px);
        }

        .nav-link:hover i {
            transform: scale(1.1);
            color: var(--primary);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            right: 50%;
            transform: translateX(50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            border-radius: 2px;
            transition: var(--transition);
        }

        .nav-link:hover::after {
            width: 80%;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .theme-toggle {
            width: 40px;
            height: 40px;
            border-radius: var(--rounded-full);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--gray-100);
            color: var(--gray-600);
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

        .theme-toggle:hover {
            background-color: var(--gray-200);
            color: var(--primary);
            transform: rotate(15deg);
        }

        /* Main Content */
        main {
            padding: 2.5rem 0;
        }

        section {
            margin-bottom: 2.5rem;
        }

        /* Search Section */
        .search-section {
            background: var(--white);
            border-radius: var(--rounded-2xl);
            padding: 2.5rem;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-200);
            position: relative;
            overflow: hidden;
            transition: var(--transition-slow);
        }

        .search-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
            z-index: -1;
            animation: gradientRotate 15s linear infinite;
        }

        @keyframes gradientRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1rem;
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            right: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            border-radius: 2px;
        }

        .section-subtitle {
            color: var(--gray-600);
            margin-bottom: 1.5rem;
            max-width: 700px;
        }

        .search-form {
            position: relative;
        }

        .search-box {
            display: flex;
            gap: 1rem;
        }

        .search-input-container {
            position: relative;
            flex: 1;
        }

        .search-input {
            width: 100%;
            padding: 1rem 1.5rem 1rem 3.5rem;
            border: 1px solid var(--gray-200);
            border-radius: var(--rounded-lg);
            font-size: 1rem;
            background-color: var(--white);
            color: var(--gray-800);
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
            font-family: var(--font-sans);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

        .search-icon {
            position: absolute;
            left: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
            transition: var(--transition);
        }

        .search-input:focus~.search-icon {
            color: var(--primary);
            transform: translateY(-50%) scale(1.1);
        }

        .search-filter {
            position: absolute;
            right: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
            cursor: pointer;
            transition: var(--transition);
        }

        .search-input:focus~.search-filter {
            color: var(--primary);
        }

        .search-btn {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: var(--white);
            border: none;
            padding: 0 2rem;
            border-radius: var(--rounded-lg);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .search-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: var(--transition-slow);
        }

        /* Results Section */
        .results-section {
            display: none;
        }

        .results-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gray-800);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        /* Invoice Card */
        .invoice-card {
            background-color: var(--white);
            border-radius: var(--rounded-2xl);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid var(--gray-200);
            box-shadow: var(--shadow);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .invoice-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary);
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, var(--white) 100%);
            border-bottom: 1px solid var(--gray-200);
        }

        .invoice-header-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .invoice-header-text {
            font-size: 0.95rem;
            color: var(--gray-700);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .invoice-header-text i {
            color: var(--primary);
            width: 1.25rem;
            text-align: center;
        }

        .invoice-header-highlight {
            color: var(--primary-dark);
            font-weight: 600;
            background-color: rgba(59, 130, 246, 0.1);
            padding: 0.25rem 0.75rem;
            border-radius: var(--rounded-full);
            border: 1px solid rgba(59, 130, 246, 0.2);
        }

        /* Invoice Details */
        .invoice-details {
            padding: 1.5rem;
        }

        .invoice-items-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        /* Table Styles */
        .responsive-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 1.5rem;
            overflow: hidden;
            border-radius: var(--rounded-lg);
            background-color: var(--white);
            box-shadow: var(--shadow-sm);
        }

        .responsive-table thead {
            background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
            color: var(--white);
            position: sticky;
            top: 0;
        }

        .responsive-table th {
            padding: 1rem;
            text-align: right;
            font-weight: 500;
            position: relative;
        }

        .responsive-table th:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            height: 50%;
            width: 1px;
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%);
        }

        .responsive-table td {
            padding: 1rem;
            text-align: right;
            border-bottom: 1px solid var(--gray-100);
            vertical-align: middle;
            transition: var(--transition);
        }

        .responsive-table tr:last-child td {
            border-bottom: none;
        }

        .responsive-table tr:hover td {
            background-color: rgba(59, 130, 246, 0.05);
        }

        /* Warranty Status Badges */
        .warranty-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            border-radius: var(--rounded-full);
            font-size: 0.85rem;
            font-weight: 500;
            transition: var(--transition);
            border: 1px solid transparent;
        }

        .warranty-active {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
            border-color: rgba(16, 185, 129, 0.2);
        }

        .warranty-expired {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
            border-color: rgba(239, 68, 68, 0.2);
        }

        .warranty-warning {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning);
            border-color: rgba(245, 158, 11, 0.2);
        }

        .warranty-none {
            background-color: rgba(100, 116, 139, 0.1);
            color: var(--gray-500);
            border-color: rgba(100, 116, 139, 0.2);
        }

        .warranty-days {
            font-size: 0.75rem;
            opacity: 0.8;
            margin-top: 0.25rem;
            display: block;
        }

        /* Print Button */
        .print-btn-container {
            text-align: center;
            margin: 1.5rem 0;
        }

        .print-btn {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: var(--white);
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: var(--rounded-full);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .print-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: var(--transition-slow);
        }

        .print-btn:hover {
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .print-btn:hover::before {
            left: 100%;
        }

        .print-btn:active {
            transform: translateY(0);
        }

        /* No Results */
        .no-results {
            text-align: center;
            padding: 3rem;
            background-color: var(--white);
            border-radius: var(--rounded-2xl);
            box-shadow: var(--shadow);
            border: 1px solid var(--gray-200);
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .no-results-icon {
            font-size: 3.5rem;
            color: var(--gray-400);
            margin-bottom: 1.5rem;
            display: inline-block;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .no-results-title {
            font-size: 1.5rem;
            color: var(--gray-800);
            margin-bottom: 0.75rem;
        }

        .no-results-text {
            color: var(--gray-600);
            max-width: 500px;
            margin: 0 auto;
        }

        /* Warranty Section */
        .warranty-section {
            background: var(--white);
            border-radius: var(--rounded-2xl);
            padding: 2.5rem;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-200);
        }

        .warranty-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            list-style: none;
        }

        .warranty-item {
            background-color: var(--white);
            padding: 1.5rem;
            border-radius: var(--rounded-lg);
            box-shadow: var(--shadow-sm);
            border-left: 4px solid var(--primary);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .warranty-item::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%);
            z-index: 0;
        }

        .warranty-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .warranty-item-success {
            border-left-color: var(--success);
        }

        .warranty-item-warning {
            border-left-color: var(--warning);
        }

        .warranty-item-danger {
            border-left-color: var(--danger);
        }

        .warranty-item-neutral {
            border-left-color: var(--gray-500);
        }

        /* Map Section */
        .map-section {
            background: var(--white);
            border-radius: var(--rounded-2xl);
            padding: 2.5rem;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-200);
            margin-bottom: 2.5rem;
        }

        .map-container {
            height: 400px;
            border-radius: var(--rounded-lg);
            overflow: hidden;
            margin-top: 1.5rem;
            box-shadow: var(--shadow-sm);
        }

       /* Footer Styles */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-column {
    padding: 1rem;
}

.footer-title {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-text {
    color: var(--gray-600);
    line-height: 1.8;
}

.contact-numbers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: var(--transition);
    padding: 0.5rem;
    border-radius: var(--rounded);
}

.contact-link:hover {
    color: var(--primary);
    background-color: rgba(59, 130, 246, 0.1);
    transform: translateX(5px);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}


        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .footer-link {
            color: var(--gray-600);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .footer-link i {
            font-size: 1.25rem;
            margin-bottom: 0.25rem;
        }

        .footer-link:hover {
            color: var(--primary);
            transform: translateY(-2px);
        }

        .footer-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            right: 50%;
            transform: translateX(50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            border-radius: 2px;
            transition: var(--transition);
        }

        .footer-link:hover::after {
            width: 80%;
        }
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-600);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-column {
        padding: 1rem 0;
    }
}
        /* Scroll to Top Button */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 48px;
            height: 48px;
            border-radius: var(--rounded-full);
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-lg);
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
            border: none;
        }

        .scroll-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .scroll-top:hover {
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            transform: translateY(-3px) scale(1.05);
            box-shadow: var(--shadow-xl);
        }

        /* Preloader Styles */
        .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--white);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }

        .preloader.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .preloader-logo {
            height: 80px;
            width: auto;
            margin-bottom: 2rem;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        .preloader-bar-container {
            width: 200px;
            height: 4px;
            background-color: var(--gray-200);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }

        .preloader-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--primary-light), var(--primary));
            animation: progress 2s ease-in-out infinite;
        }

        @keyframes progress {
            0% {
                width: 0;
                left: 0;
            }

            50% {
                width: 100%;
                left: 0;
            }

            100% {
                width: 0;
                left: 100%;
            }
        }

        /* Responsive Styles */
        @media (max-width: 1024px) {
            .header-container {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem 0;
            }

            .nav-links {
                gap: 1rem;
            }

            .search-box {
                flex-direction: column;
            }

            .search-btn {
                width: 100%;
                justify-content: center;
                padding: 1rem;
            }
        }

        @media (max-width: 768px) {
            .invoice-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .warranty-list {
                grid-template-columns: 1fr;
            }

            .responsive-table {
                display: block;
                overflow-x: auto;
            }

            .footer-container {
                flex-direction: column;
                gap: 1rem;
            }
        }

        @media (max-width: 480px) {

            .search-section,
            .warranty-section,
            .map-section {
                padding: 1.5rem;
            }

            .section-title {
                font-size: 1.5rem;
            }
        }

        @media print {
            .no-print {
                display: none !important;
            }

            body {
                background: white !important;
                color: black !important;
            }

            .invoice-card {
                box-shadow: none !important;
                border: 1px solid #ddd !important;
                page-break-inside: avoid;
            }
        }
    </style>
</head>

<body>
    <!-- Preloader -->
    <div class="preloader" id="preloader">
        <img src="./login/assets/images/click.png" alt="Click Logo" class="preloader-logo">
        <div class="preloader-bar-container">
            <div class="preloader-progress"></div>
        </div>
    </div>

    <header>
        <div class="container header-container">
            <div class="logo-container">
                <img src="./login/assets/images/click.png" alt="Click Logo" class="logo">
            </div>

            <nav class="nav-links">
                <a href="http://clicklaptopeg.com/" class="nav-link">
                    <i class="fas fa-store"></i>
                    <span>المتجر</span>
                </a>
                <a href="https://www.instagram.com/clicklaptopeg" class="nav-link">
                    <i class="fab fa-instagram"></i>
                    <span>إنستغرام</span>
                </a>
                <a href="http://fb.com/clicklaptopeg" class="nav-link">
                    <i class="fab fa-facebook-f"></i>
                    <span>فيسبوك</span>
                </a>
                <a href="https://www.tiktok.com/@click.laptop" class="nav-link">
                    <i class="fab fa-tiktok"></i>
                    <span>تيك توك</span>
                </a>
            </nav>

            <div class="header-actions">
                <button class="theme-toggle" id="themeToggle">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="container">
        <section class="search-section">
            <h2 class="section-title">
                <i class="fas fa-file-invoice-dollar"></i>
                بحث عن الفاتورة
            </h2>
            <p class="section-subtitle">
                ابحث باستخدام رقم الفاتورة أو اسم العميل أو رقم الهاتف للحصول على تفاصيل الفاتورة وبيانات الضمان
            </p>

            <form method="GET" action="" class="search-form" id="searchForm">
                <div class="search-box">
                    <div class="search-input-container">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" name="search" class="search-input"
                            placeholder="أدخل رقم الفاتورة أو اسم العميل أو رقم الهاتف..."
                            value="<?= isset($_GET['search']) ? htmlspecialchars($_GET['search']) : '' ?>" required>
                    </div>
                    <i class="fas fa-chevron-down search-filter" id="filterToggle"></i>
                    <button type="submit" class="search-btn" id="searchBtn">
                        <i class="fas fa-search"></i>
                        بحث
                    </button>
                </div>
            </form>
        </section>

        <div id="searchResults">
            <?php
            if (isset($_GET['search'])) {
                $searchTerm = trim($_GET['search']);

               



                     if (preg_match('/^[a-zA-Z0-9\-]+$/', $searchTerm)) {
        $invoices = $db->fetchAll("
            SELECT i.*, c.name as customer_name, c.phone as customer_phone
            FROM invoices i
            LEFT JOIN customers c ON i.customer_id = c.id
            WHERE i.invoice_number = ?
            ORDER BY i.date DESC
        ", [$searchTerm]);
      

                    if (!empty($invoices)) {
                        echo '<section class="results-section" id="resultsSection">';
                        echo '<h3 class="results-title"><i class="fas fa-file-alt"></i> نتائج البحث:</h3>';

                        foreach ($invoices as $invoice) {
                            $invoiceDate = new DateTime($invoice['date']);
                            $warrantyEnd = clone $invoiceDate;
                            $warrantyEnd->add(new DateInterval('P3M'));
                            $today = new DateTime();

                            $items = $db->fetchAll("
                                SELECT product_name, quantity, price, total, warranty_end 
                                FROM invoice_items 
                                WHERE invoice_id = ?
                            ", [$invoice['id']]);

                            echo '<article class="invoice-card">';
                            echo '<div class="invoice-header-info">';
                            // عرض اسم العميل - مطلوب ولا يقبل "عميل نقدي"
                            $customerName = !empty($invoice['customer_name']) ? htmlspecialchars($invoice['customer_name']) : 'العميل غير مسجل';
                            echo '<p class="invoice-header-text"><i class="far fa-user"></i> الاسم: ' . $customerName . '</p>';

                            // عرض رقم الهاتف - مطلوب ولا يقبل "غير متوفر"
                            $customerPhone = !empty($invoice['customer_phone']) ? htmlspecialchars($invoice['customer_phone']) : 'لم يتم تسجيل رقم';
                            echo '<p class="invoice-header-text"><i class="fas fa-phone"></i> الهاتف: ' . $customerPhone . '</p>';

                            echo '</div>';
                            echo '<div class="invoice-header">';
                            echo '<div class="invoice-header-info">';
                            echo '<p class="invoice-header-text"><i class="fas fa-hashtag"></i> رقم الفاتورة: <span class="invoice-header-highlight">' . htmlspecialchars($invoice['invoice_number']) . '</span></p>';
                            echo '<p class="invoice-header-text"><i class="far fa-calendar-alt"></i> التاريخ: ' . date('d/m/Y', strtotime($invoice['date'])) . '</p>';
                            echo '</div>';
                            echo '<div class="invoice-header-info">';
                            echo '<p class="invoice-header-text"><i class="far fa-user"></i> الاسم: ' . htmlspecialchars($invoice['customer_name']) . '</p>';
                            echo '<p class="invoice-header-text"><i class="fas fa-phone"></i> الهاتف: ' . htmlspecialchars($invoice['customer_phone']) . '</p>';
                            echo '</div>';
                            echo '</div>';

                            echo '<div class="invoice-details">';
                            echo '<h4 class="invoice-items-title"><i class="fas fa-shopping-basket"></i> الأصناف المشتراة:</h4>';
                            echo '<div class="table-responsive">';
                            echo '<table class="responsive-table">';
                            echo '<thead><tr>
                                <th><i class="fas fa-box-open"></i> الصنف</th>
                                <th><i class="fas fa-sort-amount-up"></i> الكمية</th>
                                <th><i class="fas fa-tag"></i> السعر</th>
                                <th><i class="fas fa-calculator"></i> الإجمالي</th>
                                <th><i class="fas fa-shield-alt"></i> حالة الضمان</th>
                              </tr></thead>';
                            echo '<tbody>';

                            foreach ($items as $item) {
                                echo '<tr>';
                                echo '<td>' . htmlspecialchars($item['product_name']) . '</td>';
                                echo '<td>' . htmlspecialchars($item['quantity']) . '</td>';
                                echo '<td>' . number_format($item['price'], 2) . ' ج.م</td>';
                                echo '<td>' . number_format($item['total'], 2) . ' ج.م</td>';

                                if (!empty($item['warranty_end'])) {
                                    $today = new DateTime();
                                    $warrantyEnd = new DateTime($item['warranty_end']);
                                    $interval = $today->diff($warrantyEnd);
                                    if ($warrantyEnd >= $today) {
                                        if ($interval->days <= 15) {
                                            // Warranty expiring soon (warning)
                                            echo '<td><div class="warranty-badge warranty-warning">
                                                <i class="fas fa-exclamation-circle"></i> تنتهي قريباً
                                                <div class="warranty-days">حتى: ' . $warrantyEnd->format('d/m/Y') . '<br>متبقي: ' . $interval->days . ' يوم</div>
                                              </div></td>';
                                        } else {
                                            // Warranty active (success)
                                            echo '<td><div class="warranty-badge warranty-active">
                                                <i class="fas fa-check-circle"></i> ساري
                                                <div class="warranty-days">حتى: ' . $warrantyEnd->format('d/m/Y') . '<br>متبقي: ' . $interval->days . ' يوم</div>
                                              </div></td>';
                                        }
                                    } else {
                                        // Warranty expired (danger)
                                        echo '<td><div class="warranty-badge warranty-expired">
                                            <i class="fas fa-times-circle"></i> منتهي
                                            <div class="warranty-days">منذ: ' . $interval->days . ' يوم</div>
                                          </div></td>';
                                    }
                                } else {
                                    // No warranty (neutral)
                                    echo '<td><div class="warranty-badge warranty-none">
                                        <i class="fas fa-ban"></i> بدون ضمان
                                      </div></td>';
                                }
                                echo '</tr>';
                            }

                            echo '</tbody></table>';
                            echo '</div></div>';

                            echo '<div class="print-btn-container no-print">';
                            echo '<button class="print-btn" onclick="openPrintWindow(\'' . htmlspecialchars($invoice['invoice_number']) . '\')">
                                <i class="fas fa-print"></i> طباعة الفاتورة
                              </button>';
                            echo '</div>';

                            echo '</article>';
                        }

                        echo '</section>';
                    } else {
                        echo '<section class="no-results">';
                        echo '<i class="fas fa-search no-results-icon"></i>';
                        echo '<h3 class="no-results-title">لا توجد نتائج</h3>';
                        echo '<p class="no-results-text">لم يتم العثور على فواتير تطابق بحثك "' . htmlspecialchars($searchTerm) . '"</p>';
                        echo '</section>';
                    }
                }
            }
            ?>
        </div>

        <section class="warranty-section">
            <h2 class="section-title">
                <i class="fas fa-shield-alt"></i>
                شروط الضمان
            </h2>
            <ul class="warranty-list">
                <li class="warranty-item warranty-item-success">
                    <i class="fas fa-check-circle"></i> تغطي شهادة الضمان عيوب التصنيع لمدة 3 شهور من تاريخ الشراء.
                </li>
                <li class="warranty-item warranty-item-danger">
                    <i class="fas fa-times-circle"></i> لا يشمل الضمان الأضرار الناتجة عن سوء الاستخدام أو الحوادث.
                </li>
                <li class="warranty-item">
                    <i class="fas fa-file-invoice"></i> يجب تقديم هذه الفاتورة عند المطالبة بالضمان.
                </li>
                <li class="warranty-item warranty-item-neutral">
                    <i class="fas fa-battery-quarter"></i> الضمان لا يشمل البطاريات والملحقات الخارجية.
                </li>
            </ul>
        </section>

       
    </main>

   <footer>
    <div class="container footer-container">
        <div class="footer-grid">
            <div class="footer-column">
                <h4 class="footer-title">
                    <i class="fas fa-map-marker-alt"></i>
                    عنوان المتجر
                </h4>
                <p class="footer-text">
                    كفر الشيخ - شارع النبوي المهندس<br>
                    الشارع المقابل لمحل بافلو<br>
                    بجوار محل "طاطا"<br>
                    بجوار حارة أبو عبير<br>
                    شركة كليك للكمبيوتر واللابتوب
                </p>
            </div>
            
            <div class="footer-column">
                <h4 class="footer-title">
                    <i class="fas fa-phone-alt"></i>
                    أرقام التواصل
                </h4>
                <div class="contact-numbers">
                    <a href="tel:01090006526" class="contact-link">
                        <i class="fas fa-mobile-alt"></i> 01090006526
                    </a>
                    <a href="tel:01015515978" class="contact-link">
                        <i class="fas fa-mobile-alt"></i> 01015515978
                    </a>
                    <a href="tel:01021270039" class="contact-link">
                        <i class="fas fa-mobile-alt"></i> 01021270039
                    </a>
                </div>
            </div>
            
            <div class="footer-column">
                <h4 class="footer-title">
                    <i class="fas fa-share-alt"></i>
                    وسائل التواصل
                </h4>
                <div class="social-links">
                    <a href="http://clicklaptopeg.com/" class="footer-link">
                        <i class="fas fa-store"></i>
                        <span>المتجر</span>
                    </a>
                    <a href="https://www.instagram.com/clicklaptopeg" class="footer-link">
                        <i class="fab fa-instagram"></i>
                        <span>إنستغرام</span>
                    </a>
                    <a href="http://fb.com/clicklaptopeg" class="footer-link">
                        <i class="fab fa-facebook-f"></i>
                        <span>فيسبوك</span>
                    </a>
                    <a href="https://www.tiktok.com/@click.laptop" class="footer-link">
                        <i class="fab fa-tiktok"></i>
                        <span>تيك توك</span>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>جميع الحقوق محفوظة &copy; شركة كليك للكمبيوتر واللابتوب <?= date('Y') ?></p>
        </div>
    </div>
</footer>

    <button class="scroll-top" id="scrollTop" title="انتقل إلى الأعلى">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        // Preloader
        window.addEventListener('load', function () {
            const preloader = document.getElementById('preloader');
            setTimeout(() => {
                preloader.classList.add('hidden');
            }, 1000);
        });

        // Theme Toggle Functionality
        const themeToggle = document.getElementById('themeToggle');
        const body = document.body;
        const currentTheme = localStorage.getItem('theme') || 'light';

        // Set initial theme
        body.setAttribute('data-theme', currentTheme);
        updateThemeIcon(currentTheme);

        // Toggle theme
        themeToggle.addEventListener('click', () => {
            const currentTheme = body.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';

            body.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            updateThemeIcon(newTheme);
        });

        function updateThemeIcon(theme) {
            const icon = themeToggle.querySelector('i');
            if (theme === 'dark') {
                icon.classList.replace('fa-moon', 'fa-sun');
            } else {
                icon.classList.replace('fa-sun', 'fa-moon');
            }
        }

        // Print Invoice Function
        function openPrintWindow(invoiceNumber) {
            window.open('user_print_invoice.php?num=' + encodeURIComponent(invoiceNumber), '_blank');
        }

        // Show results section with animations
        document.addEventListener('DOMContentLoaded', function () {
            const resultsSection = document.getElementById('resultsSection');
            if (resultsSection) {
                resultsSection.style.display = 'block';

                // Animate each invoice card with delay
                const invoiceCards = document.querySelectorAll('.invoice-card');
                invoiceCards.forEach((card, index) => {
                    card.style.animationDelay = `${index * 0.1}s`;
                });
            }

            // Scroll to top button
            const scrollTopBtn = document.getElementById('scrollTop');
            window.addEventListener('scroll', function () {
                if (window.pageYOffset > 300) {
                    scrollTopBtn.classList.add('visible');
                } else {
                    scrollTopBtn.classList.remove('visible');
                }
            });

            scrollTopBtn.addEventListener('click', function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // Search form submission with loading indicator
            const searchForm = document.getElementById('searchForm');
            const searchBtn = document.getElementById('searchBtn');
            const searchResults = document.getElementById('searchResults');

            searchForm.addEventListener('submit', function (e) {
                e.preventDefault();

                // Show loading state
                searchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري البحث...';
                searchBtn.disabled = true;

                // Simulate loading (in real app, this would be an AJAX call)
                setTimeout(() => {
                    // Submit the form
                    this.submit();

                    // Reset button state
                    searchBtn.innerHTML = '<i class="fas fa-search"></i> بحث';
                    searchBtn.disabled = false;
                }, 1000);
            });

            // Initialize map
            function initMap() {
                const mapContainer = document.getElementById('storeMap');
                if (!mapContainer) return;

                // Default to Riyadh coordinates
                const map = L.map(mapContainer).setView([31.10917, 30.93411], 15);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);

                // Add marker with custom icon
                const storeIcon = L.divIcon({
                    className: 'store-marker',
                    html: '<i class="fas fa-store" style="color: #3B82F6; font-size: 24px;"></i>',
                    iconSize: [30, 30],
                    iconAnchor: [15, 30]
                });

                L.marker([31.10917, 30.93411], { icon: storeIcon }).addTo(map)
                    .bindPopup('موقع متجرنا<br>يمكنك زيارتنا خلال ساعات العمل');

                // Add circle around marker
                L.circle([31.10917, 30.93411], {
                    color: '#3B82F6',
                    fillColor: '#3B82F6',
                    fillOpacity: 0.1,
                    radius: 100
                }).addTo(map);
            }

            // Initialize map when page loads
            initMap();
        });
    </script>
</body>

</html>

<?php require_once 'includes/footer.php'; ?>