<?php require_once("session-master.php"); 
if (!isset($_SESSION['company_id'])) {
    	echo "
        <script>
            alert('Company context missing. Please re-login.');
            window.location.href = 'dashboard.php';
        </script>
        ";
        exit;
}

$company_id = (int) $_SESSION['company_id'];

?>


<?php
include('functions.php');
include_once("includes/config.php");

?>




<!DOCTYPE html>
<html>



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Invoice360- Invoices. Vouchers. Transactions</title>

<meta content="FinVoice- Invoicing, Finance and Scheduling" name="description">
<meta content="FinVoice- Invoicing, Finance and Scheduling" name="keywords">

<meta content="FinVoice- Invoicing, Finance and Scheduling" property="og:title">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="app-assets/favicon/inv.png">
    <link rel="icon" type="image/png" sizes="32x32" href="app-assets/favicon/inv.png">
    <link rel="icon" type="image/png" sizes="16x16" href="app-assets/favicon/inv.png">
    <link rel="manifest" href="app-assets/favicon/inv.png">
    <link rel="mask-icon" href="app-assets/favicon/inv.png" color="#0010f7">
    <meta name="msapplication-TileColor" content="#0010f7">
    <meta name="theme-color" content="#ffffff">

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet" />

    <!-- Plugin -->
    <link rel="stylesheet" type="text/css" href="app-assets/css/plugin/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="app-assets/icons/iconly/index.min.css">
    <link rel="stylesheet" type="text/css" href="app-assets/icons/remix-icon/index.min.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/colors.css">

    <!-- Base -->
    <link rel="stylesheet" type="text/css" href="app-assets/css/base/typography.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/base/base.css">

    <!-- Theme -->
    <link rel="stylesheet" type="text/css" href="app-assets/css/theme/colors-dark.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/theme/theme-dark.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/custom-rtl.css">

    <!-- Layouts -->
    <link rel="stylesheet" type="text/css" href="app-assets/css/layouts/sider.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/layouts/header.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/layouts/page-content.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/components.css">
    <!-- Customizer -->
    <link rel="stylesheet" type="text/css" href="app-assets/css/layouts/customizer.css">

    <!-- Charts -->
    <link rel="stylesheet" type="text/css" href="app-assets/css/plugin/apex-charts.css">

    <!-- Pages -->
    <link rel="stylesheet" type="text/css" href="app-assets/css/pages/dashboard-analytics.css">

    <!-- Custom -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- CSS -->
	<link rel="stylesheet" href="css/bootstrap.datetimepicker.css">
	<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
	<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
     <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
	
  
  	<!-- JS -->
	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="js/moment.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
	<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
	<script src="js/bootstrap.datetime.js"></script>
	<script src="js/bootstrap.password.js"></script>
	<script src="js/scripts.js"></script>
	
	<!-- AdminLTE App -->
	<script src="js/app.min.js"></script>

   

    


    <link href='fullcalendar/packages/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
    <link href='fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
    <link href='fullcalendar/packages/list/main.css' rel='stylesheet' />
    <script src='fullcalendar/packages/core/main.js'></script>
    <script src='fullcalendar/packages/interaction/main.js'></script>
    <script src='fullcalendar/packages/daygrid/main.js'></script>
    <script src='fullcalendar/packages/timegrid/main.js'></script>
    <script src='fullcalendar/packages/list/main.js'></script>
    <script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
    <script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>



      <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css" rel="stylesheet">

      <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>

    <style>

        /*
        tooltip css
        */

        .popper,
        .tooltip {
            position: absolute;
            z-index: 9999;
            background: #FFC107;
            color: black;
            width: 150px;
            border-radius: 3px;
            box-shadow: 0 0 2px rgba(0,0,0,0.5);
            padding: 10px;
            text-align: center;
        }
        .style5 .tooltip {
            background: #1E252B;
            color: #FFFFFF;
            max-width: 200px;
            width: auto;
            font-size: .8rem;
            padding: .5em 1em;
        }
        .popper .popper__arrow,
        .tooltip .tooltip-arrow {
            width: 0;
            height: 0;
            border-style: solid;
            position: absolute;
            margin: 5px;
        }

        .tooltip .tooltip-arrow,
        .popper .popper__arrow {
            border-color: #FFC107;
        }
        .style5 .tooltip .tooltip-arrow {
            border-color: #1E252B;
        }
        .popper[x-placement^="top"],
        .tooltip[x-placement^="top"] {
            margin-bottom: 5px;
        }
        .popper[x-placement^="top"] .popper__arrow,
        .tooltip[x-placement^="top"] .tooltip-arrow {
            border-width: 5px 5px 0 5px;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            bottom: -5px;
            left: calc(50% - 5px);
            margin-top: 0;
            margin-bottom: 0;
        }
        .popper[x-placement^="bottom"],
        .tooltip[x-placement^="bottom"] {
            margin-top: 5px;
        }
        .tooltip[x-placement^="bottom"] .tooltip-arrow,
        .popper[x-placement^="bottom"] .popper__arrow {
            border-width: 0 5px 5px 5px;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
            top: -5px;
            left: calc(50% - 5px);
            margin-top: 0;
            margin-bottom: 0;
        }
        .tooltip[x-placement^="right"],
        .popper[x-placement^="right"] {
            margin-left: 5px;
        }
        .popper[x-placement^="right"] .popper__arrow,
        .tooltip[x-placement^="right"] .tooltip-arrow {
            border-width: 5px 5px 5px 0;
            border-left-color: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
            left: -5px;
            top: calc(50% - 5px);
            margin-left: 0;
            margin-right: 0;
        }
        .popper[x-placement^="left"],
        .tooltip[x-placement^="left"] {
            margin-right: 5px;
        }
        .popper[x-placement^="left"] .popper__arrow,
        .tooltip[x-placement^="left"] .tooltip-arrow {
            border-width: 5px 0 5px 5px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            right: -5px;
            top: calc(50% - 5px);
            margin-left: 0;
            margin-right: 0;
        }


        
    </style>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const calendarEl = document.getElementById('calendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        height: 'auto',

        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,listWeek'
        },

        navLinks: true,
        editable: false,

        events: {
            url: 'events.php',
            failure: function () {
                alert('Failed to load calendar events.');
            }
        },

        /* =========================
           EVENT CLICK → MODAL
        ========================== */
        eventClick: function (info) {
            info.jsEvent.preventDefault();

            const event = info.event;

            document.getElementById('eventTitle').innerText =
                event.title;

            document.getElementById('eventDate').innerText =
                event.start.toLocaleDateString('en-GB', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });

            document.getElementById('eventType').innerText =
                event.extendedProps.type ?? '-';

            document.getElementById('eventDescription').innerText =
                event.title;

            document.getElementById('eventLocation').innerText =
                event.extendedProps.location ?? '-';

            document.getElementById('eventAmount').innerText =
                '₦' + (event.extendedProps.amount ?? '0.00');

            const modal = new bootstrap.Modal(
                document.getElementById('eventModal')
            );
            modal.show();
        },

        /* =========================
           EVENT STYLING
        ========================== */
        eventDidMount: function (info) {

            let bg = '#2563eb';

            if (info.event.extendedProps.type === 'Renewal') bg = '#dc2626';
            if (info.event.extendedProps.type === 'Payment') bg = '#16a34a';
            if (info.event.extendedProps.type === 'Meeting') bg = '#7c3aed';

            info.el.style.backgroundColor = bg;
            info.el.style.borderColor = bg;
            info.el.style.color = '#ffffff';
            info.el.style.cursor = 'pointer';
        },

        loading: function (isLoading) {
            document.getElementById('loading').style.display =
                isLoading ? 'block' : 'none';
        }
    });

    calendar.render();
});
</script>


   


    <style>

        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #script-warning {
            display: none;
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 12px;
            color: red;
        }

        #loading {
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        #calendar {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 10px;
        }

        
#calendar {
    max-width: 100%;
}

.fc-toolbar-title {
    font-size: 18px;
    font-weight: 600;
}

.fc-event {
    cursor: pointer;
}

/* =========================
   FULLCALENDAR FIXES
========================= */

.fc-event {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
    background: #f3f4f6 !important;
}

.fc-event-title {
    color: #292727ff !important;
}

.fc-daygrid-event-dot {
    display: none !important;
}

/* List view fixes */
.fc-list-event-title,
.fc-list-event-time {
    color: #111827 !important;
    font-weight: 600;
}

.fc-list-event:hover {
    background: #d7e0f3ff !important;
    cursor: pointer;
}






.dashboard-header {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    background: linear-gradient(135deg, #ffffff, #f6f8fb);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #eef1f5;
}

.header-text h3 {
    margin: 0;
    font-weight: 700;
    color: #1f2937;
    font-size: 22px;
}

.header-text p {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

.header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 16px;
    font-size: 18px;
}




    </style>

<?php include("new-css.php"); ?>

</head>


<body>

<?php
$company = getCompanyDetails($mysqli, $_SESSION['company_id']);
    $company_name    = $company['company_name'] ?? '';
    $currency        = $company['currency'] ?? '';
    $vat_rate        = $company['vat_rate'] ?? '';
    $invoice_prefix  = $company['invoice_prefix'] ?? '';
    $company_logo    = $company['company_logo'] ?? '';
    $target          = $company['year_target'] ?? '';







?>

<!-- Mobile-only menu -->
<div class="mobile-menu-fixed d-block d-md-none text-end">

    <button
        class="btn btn-primary btn-sm dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
    >
        <i class="fa fa-bars"></i>  Menu
    </button>

<ul class="dropdown-menu dropdown-menu-end mobile-menu">

    <!-- Dashboard -->
    <li>
        <a class="dropdown-item" href="dashboard.php">
            <i class="fa fa-dashboard me-2"></i> Dashboard
        </a>
    </li>

   <!-- Invoice Dropdown -->
<li class="dropdown-submenu">
    <a href="#" class="dropdown-item submenu-toggle">
        <i class="fa fa-file-text-o me-2"></i> Invoicing
    </a>

    <ul class="submenu">
        <li><a class="dropdown-item" href="invoice-list.php">Invoice</a></li>
        <li><a class="dropdown-item" href="product-list.php">Products</a></li>
        <li><a class="dropdown-item" href="customer-list.php">Customer</a></li>
    </ul>
</li>


    
    <li>
        <a class="dropdown-item" href="voucher-list.php">
            <i class="fa fa-list-alt me-2"></i> Vouchers
        </a>
    </li>
    <li>
        <a class="dropdown-item" href="expense-list.php">
            <i class="fa fa-exchange me-2"></i> Transactions
        </a>
    </li>

<li class="dropdown-submenu">
    <a href="#" class="dropdown-item submenu-toggle">
        <i class="fa fa-file-text-o me-2"></i> Scheduling
    </a>

    <ul class="submenu">
        <li><a class="dropdown-item" href="schedule-dashboard.php">Dashboard</a></li>
        <li><a class="dropdown-item" href="schedule-list.php">Schedules</a></li>
        
    </ul>
</li>

        <li>
        <a class="dropdown-item" href="Admin">
            <i class="fa fa-user me-2"></i> Admin
        </a>
    </li>






</ul>


</div>



    <main style= "padding-top: 70px; margin-top: -50px" class="hp-bg-color-dark-90 d-flex min-vh-100">
        <div class="hp-sidebar hp-bg-color-black-20 hp-bg-color-dark-90 border-end border-black-40 hp-border-color-dark-80">
            <div class="hp-sidebar-container">
                <div class="hp-sidebar-header-menu">
                    <div class="row justify-content-between align-items-end mx-0">
                        <div class="w-auto px-0 hp-sidebar-collapse-button hp-sidebar-visible">
                            <div class="hp-cursor-pointer">
                                <svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3.91102 1.73796L0.868979 4.78L0 3.91102L3.91102 0L7.82204 3.91102L6.95306 4.78L3.91102 1.73796Z" fill="#B2BEC3"></path>
                                    <path d="M3.91125 12.0433L6.95329 9.00125L7.82227 9.87023L3.91125 13.7812L0.000224113 9.87023L0.869203 9.00125L3.91125 12.0433Z" fill="#B2BEC3"></path>
                                </svg>
                            </div>
                        </div>

                        <div style="max-height: 100px; display: flex; align-items: center;" class=" w-auto px-0">
                            
                                

                            <a href="dashboard.php" ><img src="images/<?php echo $company_logo?>" float="left" alt="" width="auto"> </a>
                            
                        </div>

                        
                    </div>

                <ul>
                    <li>
                            <div class="menu-title">OVERVIEW</div>

                            <ul>
                                <li>
                                    <a href="dashboard.php">
                                        <div class="tooltip-item in-active" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="Analytics" aria-label="Analytics"></div>

                                        <span>
                                            <span class="submenu-item-icon">
                                            <i class="fa fa-tachometer"></i>

                                            </span>

                                            <span>Dashboard</span>
                                        </span>
                                    </a>
                                </li>

                               
                                <li>
                                    <a  href="schedule-dashboard.php">
                                <div class="tooltip-item in-active" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="E-Commerce" aria-label="E-Commerce"></div>
                                        <span>
                                            <span class="submenu-item-icon">
                                            <i class="fa fa-calendar"></i>

                                            </span>

                                            <span>Schedules</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </li>


                        <li>
                            <div class="menu-title">APPLICATIONS</div>

                            <ul>
                               
                                <li>
                                    <a href="javascript:;" class="submenu-item">
                                        <span>
                                            <span class="submenu-item-icon">
                                            <i class="fa fa-file-text"></i>
                                            </span>

                                            <span>Invoicing</span>
                                        </span>

                                        <div class="menu-arrow"></div>
                                    </a>

                                    <ul class="submenu-children" data-level="1">


                                        <li>
                                            <a href="invoice-create.php">
                                                <span>New Invoice</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="invoice-list.php">
                                                <span>Invoices</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="product-list.php">
                                                <span>Products</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="customer-list.php">
                                                <span>Customers</span>
                                            </a>
                                        </li>

                                        

                                        
                                    </ul>
                                </li>

                                <li>
                                    <a href="javascript:;" class="submenu-item">
                                        <span>
                                            <span class="submenu-item-icon">
                                            <i class="fa fa-money"></i>
                                            </span>

                                            <span>Vouchers</span>
                                        </span>

                                        <div class="menu-arrow"></div>
                                    </a>

                                    <ul class="submenu-children" data-level="1">
                                        <li>
                                            <a href="voucher-create.php">
                                                <span>New Voucher</span>
                                            </a>
                                        </li>
                                       

                                        <li>
                                            <a href="voucher-list.php">
                                                <span>Vouchers</span>
                                            </a>
                                        </li>

                                        

                                        
                                    </ul>
                                </li>


                                <li>
                                    <a href="javascript:;" class="submenu-item">
                                        <span>
                                            <span class="submenu-item-icon">
                                            <i class="fa fa-money"></i>
                                            </span>

                                            <span>Transactions</span>
                                        </span>

                                        <div class="menu-arrow"></div>
                                    </a>

                                    <ul class="submenu-children" data-level="1">
                                        <li>
                                            <a href="expense-add.php">
                                                <span>New Transaction</span>
                                            </a>
                                        </li>
                                        

                                        <li>
                                            <a href="expense-list.php">
                                                <span>Transactions</span>
                                            </a>
                                        </li>

                                        

                                        
                                    </ul>
                                </li>

                                <li>
                                    <a href="javascript:;" class="submenu-item">
                                        <span>
                                            <span class="submenu-item-icon">
                                            <i class="fa fa-calendar-o"></i>
                                            </span>

                                            <span>Scheduling</span>
                                        </span>

                                        <div class="menu-arrow"></div>
                                    </a>

                                    <ul class="submenu-children" data-level="1">
                                        <li>
                                            <a href="schedule-dashboard.php">
                                                <span>Dashboard</span>
                                            </a>
                                        </li>

                                         <li>
                                            <a href="schedule-add.php">
                                                <span>New Schedule</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="schedule-list.php">
                                                <span>Schedules</span>
                                            </a>
                                        </li>

                                        

                                        
                                    </ul>
                                </li>

                                
                                 

                                
                                <li>
                                    <a href="admin">
                                        <div class="tooltip-item in-active" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="Analytics" aria-label="Analytics"></div>

                                        <span>
                                            <span class="submenu-item-icon">
                                            <i class="fa fa-cog"></i>

                                            </span>

                                            <span><b>Admin</b></span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        

                               
                </ul>
                </div>

                <div class="row justify-content-between align-items-center hp-sidebar-footer mx-0 hp-bg-color-dark-90">
                    <div class="divider border-black-40 hp-border-color-dark-70 hp-sidebar-hidden mt-0 px-0"></div>

                    <div class="col">
                        <div class="row align-items-center">
                            <div class="w-auto px-0">
                                <div class="avatar-item bg-primary-4 d-flex align-items-center justify-content-center rounded-circle" style="width: 48px; height: 48px;">
                                    <img src="images/icon/user.png" height="100%" class="hp-img-cover">
                                </div>
                            </div>

                            <div class="w-auto ms-8 px-0 hp-sidebar-hidden mt-4">
                                <span style="font-family:'Calibri'; font-size: 17px;" class="d-block hp-text-color-black-100 hp-text-color-dark-0 hp-p1-body lh-1">
                                     <?php

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

echo "Every moment matters <br><b>" . $_SESSION['user_name'] . "!";
?>
</b>
                                </span>
                            
                            </div>
                        </div>
                    </div>

                    
                </div>
            </div>
        </div>
        <div class="hp-main-layout">



        
           

            