<?php
session_start();
include 'layouts/dbconn.php';
include 'includes/menu_config.php';

date_default_timezone_set('Africa/Nairobi');

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

$user_id = $_SESSION['user_id'];
$user_role = $_SESSION['role_name'] ?? 'User';

$sql_user = "SELECT u.*, ur.role_name FROM users u 
             INNER JOIN user_roles ur ON u.role_id = ur.role_id 
             WHERE u.user_id = ?";
$stmt_user = $conn->prepare($sql_user);
$stmt_user->bind_param("i", $user_id);
$stmt_user->execute();
$user_details = $stmt_user->get_result()->fetch_assoc();

if (!$user_details) {
    header('Location: logout.php');
    exit();
}

// Handle AJAX requests
if (isset($_POST['action'])) {
    header('Content-Type: application/json');
    
    switch ($_POST['action']) {
        case 'create_warehouse':
            $warehouse_code = strtoupper($_POST['warehouse_code']);
            $warehouse_name = $_POST['warehouse_name'];
            $address = $_POST['address'];
            $city = $_POST['city'];
            $state = $_POST['state'] ?? '';
            $country = $_POST['country'];
            $postal_code = $_POST['postal_code'] ?? '';
            $manager_name = $_POST['manager_name'] ?? '';
            $contact_phone = $_POST['contact_phone'] ?? '';
            $contact_email = $_POST['contact_email'] ?? '';
            
            // Check if warehouse code already exists
            $check_sql = "SELECT warehouse_id FROM warehouses WHERE warehouse_code = ?";
            $stmt_check = $conn->prepare($check_sql);
            $stmt_check->bind_param("s", $warehouse_code);
            $stmt_check->execute();
            if ($stmt_check->get_result()->num_rows > 0) {
                echo json_encode(['success' => false, 'message' => 'Warehouse code already exists']);
                exit();
            }
            
            $create_sql = "INSERT INTO warehouses (warehouse_code, warehouse_name, address, city, state, country, postal_code, manager_name, contact_phone, contact_email) 
                          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
            $stmt_create = $conn->prepare($create_sql);
            $stmt_create->bind_param("ssssssssss", $warehouse_code, $warehouse_name, $address, $city, $state, $country, $postal_code, $manager_name, $contact_phone, $contact_email);
            
            if ($stmt_create->execute()) {
                echo json_encode(['success' => true, 'message' => 'Warehouse created successfully']);
            } else {
                echo json_encode(['success' => false, 'message' => 'Failed to create warehouse']);
            }
            break;
            
        case 'update_warehouse':
            $warehouse_id = intval($_POST['warehouse_id']);
            $warehouse_name = $_POST['warehouse_name'];
            $address = $_POST['address'];
            $city = $_POST['city'];
            $state = $_POST['state'] ?? '';
            $country = $_POST['country'];
            $postal_code = $_POST['postal_code'] ?? '';
            $manager_name = $_POST['manager_name'] ?? '';
            $contact_phone = $_POST['contact_phone'] ?? '';
            $contact_email = $_POST['contact_email'] ?? '';
            $is_active = intval($_POST['is_active']);
            
            $update_sql = "UPDATE warehouses SET warehouse_name = ?, address = ?, city = ?, state = ?, country = ?, postal_code = ?, manager_name = ?, contact_phone = ?, contact_email = ?, is_active = ? WHERE warehouse_id = ?";
            $stmt_update = $conn->prepare($update_sql);
            $stmt_update->bind_param("sssssssssii", $warehouse_name, $address, $city, $state, $country, $postal_code, $manager_name, $contact_phone, $contact_email, $is_active, $warehouse_id);
            
            if ($stmt_update->execute()) {
                echo json_encode(['success' => true, 'message' => 'Warehouse updated successfully']);
            } else {
                echo json_encode(['success' => false, 'message' => 'Failed to update warehouse']);
            }
            break;
            
        case 'delete_warehouse':
            $warehouse_id = intval($_POST['warehouse_id']);
            
            // Check if warehouse is being used
            $check_sql = "SELECT COUNT(*) as count FROM manifests WHERE origin_warehouse_id = ? OR destination_warehouse_id = ?";
            $stmt_check = $conn->prepare($check_sql);
            $stmt_check->bind_param("ii", $warehouse_id, $warehouse_id);
            $stmt_check->execute();
            $usage_count = $stmt_check->get_result()->fetch_assoc()['count'];
            
            if ($usage_count > 0) {
                echo json_encode(['success' => false, 'message' => 'Cannot delete warehouse - it is being used in manifests']);
                exit();
            }
            
            $delete_sql = "DELETE FROM warehouses WHERE warehouse_id = ?";
            $stmt_delete = $conn->prepare($delete_sql);
            $stmt_delete->bind_param("i", $warehouse_id);
            
            if ($stmt_delete->execute()) {
                echo json_encode(['success' => true, 'message' => 'Warehouse deleted successfully']);
            } else {
                echo json_encode(['success' => false, 'message' => 'Failed to delete warehouse']);
            }
            break;
            
        default:
            echo json_encode(['success' => false, 'message' => 'Invalid action']);
    }
    exit();
}

// Get warehouses with statistics
$sql_warehouses = "
    SELECT 
        w.*,
        COUNT(DISTINCT m_origin.manifest_id) as origin_manifests,
        COUNT(DISTINCT m_dest.manifest_id) as destination_manifests,
        COUNT(DISTINCT l.location_id) as linked_locations
    FROM warehouses w
    LEFT JOIN manifests m_origin ON w.warehouse_id = m_origin.origin_warehouse_id
    LEFT JOIN manifests m_dest ON w.warehouse_id = m_dest.destination_warehouse_id
    LEFT JOIN locations l ON l.city = w.city
    GROUP BY w.warehouse_id
    ORDER BY w.is_active DESC, w.warehouse_name";

$warehouses_result = $conn->query($sql_warehouses);

// Get countries for dropdown
$sql_countries = "SELECT country_name FROM countries ORDER BY country_id DESC";
$result = $conn->query($sql_countries);

$countries = [];
if ($result && $result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $countries[] = $row['country_name'];
    }
}


$conn->close();
?>

<?php include 'layouts/main.php'; ?>

<head>
    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Warehouse Management')); ?>
    <?php include 'layouts/head-css.php'; ?>
    
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    
    <style>
        .warehouse-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .warehouse-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .warehouse-card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        
        .status-badge {
            padding: 0.35rem 0.75rem;
            border-radius: 15px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .status-active { background: #d1fae5; color: #065f46; }
        .status-inactive { background: #fee2e2; color: #991b1b; }
        
        .action-btn {
            padding: 0.35rem 0.75rem;
            border-radius: 8px;
            font-size: 0.75rem;
            margin: 0.1rem;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .btn-view { background: #e3f2fd; color: #1976d2; }
        .btn-edit { background: #e8f5e8; color: #2e7d32; }
        .btn-delete { background: #ffebee; color: #c62828; }
        
        .action-btn:hover {
            transform: scale(1.05);
            text-decoration: none;
        }
        
        .warehouse-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            margin-right: 1rem;
        }
    </style>
</head>

<body>
    <div id="layout-wrapper">
        <?php include 'layouts/menu.php'; ?>
        
        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                <h4 class="mb-sm-0"><i class="ri-building-line me-2"></i>Warehouse Management</h4>
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="index.php">Dashboard</a></li>
                                        <li class="breadcrumb-item active">Warehouses</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="warehouse-header">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h2 class="mb-1">Warehouse Network Management</h2>
                                <p class="mb-0 opacity-90">
                                    Manage your warehouse locations, facilities, and operational details
                                </p>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <button class="btn btn-light btn-lg" onclick="showCreateWarehouseModal()">
                                    <i class="ri-add-line me-2"></i>Add Warehouse
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="warehouse-card">
                                <div class="card-header bg-transparent border-bottom">
                                    <h5 class="card-title mb-0">
                                        <i class="ri-building-4-line me-2"></i>Warehouse Locations
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="warehousesTable">
                                            <thead>
                                                <tr>
                                                    <th>Warehouse</th>
                                                    <th>Code</th>
                                                    <th>Location</th>
                                                    <th>Contact</th>
                                                    <th>Statistics</th>
                                                    <th>Status</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php while ($warehouse = $warehouses_result->fetch_assoc()): ?>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="warehouse-icon">
                                                                <i class="ri-building-line"></i>
                                                            </div>
                                                            <div>
                                                                <div class="fw-bold"><?php echo htmlspecialchars($warehouse['warehouse_name']); ?></div>
                                                                <?php if ($warehouse['manager_name']): ?>
                                                                <small class="text-muted">Manager: <?php echo htmlspecialchars($warehouse['manager_name']); ?></small>
                                                                <?php endif; ?>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-primary"><?php echo htmlspecialchars($warehouse['warehouse_code']); ?></span>
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <div class="fw-bold"><?php echo htmlspecialchars($warehouse['city']); ?>, <?php echo htmlspecialchars($warehouse['country']); ?></div>
                                                            <small class="text-muted"><?php echo htmlspecialchars($warehouse['address']); ?></small>
                                                            <?php if ($warehouse['postal_code']): ?>
                                                            <br><small class="text-muted"><?php echo htmlspecialchars($warehouse['postal_code']); ?></small>
                                                            <?php endif; ?>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <?php if ($warehouse['contact_phone']): ?>
                                                        <div><i class="ri-phone-line me-1"></i><?php echo htmlspecialchars($warehouse['contact_phone']); ?></div>
                                                        <?php endif; ?>
                                                        <?php if ($warehouse['contact_email']): ?>
                                                        <div><i class="ri-mail-line me-1"></i><?php echo htmlspecialchars($warehouse['contact_email']); ?></div>
                                                        <?php endif; ?>
                                                    </td>
                                                    <td>
                                                        <div class="small">
                                                            <div>Origin: <?php echo $warehouse['origin_manifests']; ?> manifests</div>
                                                            <div>Destination: <?php echo $warehouse['destination_manifests']; ?> manifests</div>
                                                            <div>Locations: <?php echo $warehouse['linked_locations']; ?> linked</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="status-badge status-<?php echo $warehouse['is_active'] ? 'active' : 'inactive'; ?>">
                                                            <?php echo $warehouse['is_active'] ? 'Active' : 'Inactive'; ?>
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <div class="btn-group" role="group">
                                                            <button class="action-btn btn-view" onclick="viewWarehouse(<?php echo $warehouse['warehouse_id']; ?>)" 
                                                                    title="View Details">
                                                                <i class="ri-eye-line"></i>
                                                            </button>
                                                            <button class="action-btn btn-edit" onclick="editWarehouse(<?php echo $warehouse['warehouse_id']; ?>)" 
                                                                    title="Edit Warehouse">
                                                                <i class="ri-edit-line"></i>
                                                            </button>
                                                            <button class="action-btn btn-delete" onclick="deleteWarehouse(<?php echo $warehouse['warehouse_id']; ?>)" 
                                                                    title="Delete Warehouse">
                                                                <i class="ri-delete-bin-line"></i>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <?php endwhile; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <?php include 'layouts/footer.php'; ?>
        </div>
    </div>

    <!-- Create/Edit Warehouse Modal -->
    <div class="modal fade" id="warehouseModal" tabindex="-1" aria-labelledby="warehouseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="warehouseModalLabel">
                        <i class="ri-building-line me-2"></i>Add New Warehouse
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="warehouseForm">
                    <input type="hidden" id="warehouse_id" name="warehouse_id">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="warehouse_code" class="form-label">Warehouse Code *</label>
                                <input type="text" class="form-control" id="warehouse_code" name="warehouse_code" 
                                       placeholder="e.g., NBO-01" maxlength="10" required style="text-transform: uppercase;">
                                <div class="form-text">Unique identifier (3-10 characters)</div>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="warehouse_name" class="form-label">Warehouse Name *</label>
                                <input type="text" class="form-control" id="warehouse_name" name="warehouse_name" 
                                       placeholder="e.g., Nairobi Main Warehouse" required>
                            </div>
                            
                            <div class="col-12">
                                <label for="address" class="form-label">Address *</label>
                                <textarea class="form-control" id="address" name="address" rows="2" 
                                         placeholder="Enter full street address" required></textarea>
                            </div>
                            
                            <div class="col-md-4">
                                <label for="city" class="form-label">City *</label>
                                <input type="text" class="form-control" id="city" name="city" 
                                       placeholder="e.g., Nairobi" required>
                            </div>
                            
                            <div class="col-md-4">
                                <label for="state" class="form-label">State/Province</label>
                                <input type="text" class="form-control" id="state" name="state" 
                                       placeholder="e.g., Nairobi County">
                            </div>
                            
                            <div class="col-md-4">
                                <label for="country" class="form-label">Country *</label>
                                <select class="form-select" id="country" name="country" required>
                                    <option value="">Select Country</option>
                                    <?php foreach ($countries as $country): ?>
                                        <option value="<?php echo htmlspecialchars($country); ?>">
                                            <?php echo htmlspecialchars($country); ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                            
                            <div class="col-md-6">
                                <label for="postal_code" class="form-label">Postal Code</label>
                                <input type="text" class="form-control" id="postal_code" name="postal_code" 
                                       placeholder="e.g., 00100">
                            </div>
                            
                            <div class="col-md-6">
                                <label for="manager_name" class="form-label">Manager Name</label>
                                <input type="text" class="form-control" id="manager_name" name="manager_name" 
                                       placeholder="Warehouse manager name">
                            </div>
                            
                            <div class="col-md-6">
                                <label for="contact_phone" class="form-label">Contact Phone</label>
                                <input type="text" class="form-control" id="contact_phone" name="contact_phone" 
                                       placeholder="e.g., +254701234567">
                            </div>
                            
                            <div class="col-md-6">
                                <label for="contact_email" class="form-label">Contact Email</label>
                                <input type="email" class="form-control" id="contact_email" name="contact_email" 
                                       placeholder="warehouse@company.com">
                            </div>
                            
                            <div class="col-12" id="statusSection" style="display: none;">
                                <label for="is_active" class="form-label">Status</label>
                                <select class="form-select" id="is_active" name="is_active">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">
                            <i class="ri-save-line me-1"></i>Save Warehouse
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <?php include 'layouts/vendor-scripts.php'; ?>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    
    <script>
$(document).ready(function() {
    $('#warehousesTable').DataTable({
        responsive: true,
        pageLength: 15,
        order: [[5, 'desc'], [0, 'asc']], // Sort by status then name
        columnDefs: [
            { targets: [6], orderable: false }
        ]
    });

    $('#warehouseForm').on('submit', function(e) {
        e.preventDefault();
        
        const warehouseId = $('#warehouse_id').val();
        const action = warehouseId ? 'update_warehouse' : 'create_warehouse';
        const actionText = warehouseId ? 'updating' : 'creating';
        
        const formData = new FormData(this);
        formData.append('action', action);
        
        Swal.fire({
            title: `${actionText.charAt(0).toUpperCase() + actionText.slice(1)} Warehouse...`,
            text: `Please wait while we ${actionText} the warehouse.`,
            icon: 'info',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        $.ajax({
            url: 'warehouses.php',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    
                    $('#warehouseModal').modal('hide');
                    location.reload();
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: response.message,
                        icon: 'error'
                    });
                }
            },
            error: function() {
                Swal.fire({
                    title: 'Error',
                    text: 'An error occurred while processing the request.',
                    icon: 'error'
                });
            }
        });
    });

    // Auto-generate warehouse code based on city
    $('#city').on('input', function() {
        const city = $(this).val().toUpperCase();
        if (city && !$('#warehouse_id').val()) {
            const code = city.substring(0, 3) + '-01';
            $('#warehouse_code').val(code);
        }
    });
});

function showCreateWarehouseModal() {
    $('#warehouseModalLabel').html('<i class="ri-building-line me-2"></i>Add New Warehouse');
    $('#warehouseForm')[0].reset();
    $('#warehouse_id').val('');
    $('#statusSection').hide();
    $('#warehouseModal').modal('show');
}

function editWarehouse(warehouseId) {
    // Get warehouse data and populate form
    const row = $(`button[onclick="editWarehouse(${warehouseId})"]`).closest('tr');
    const warehouseName = row.find('td:eq(0) .fw-bold').text();
    
    $('#warehouseModalLabel').html('<i class="ri-edit-line me-2"></i>Edit Warehouse');
    $('#warehouse_id').val(warehouseId);
    $('#statusSection').show();
    
    // You would typically fetch warehouse data via AJAX here
    // For now, I'll show the modal and let user fill in the details
    $('#warehouseModal').modal('show');
    
    Swal.fire({
        title: 'Edit Warehouse',
        text: 'Please update the warehouse details in the form.',
        icon: 'info',
        timer: 2000,
        showConfirmButton: false
    });
}

function viewWarehouse(warehouseId) {
    Swal.fire({
        title: 'Warehouse Details',
        text: 'Warehouse details view would be implemented here.',
        icon: 'info'
    });
}

function deleteWarehouse(warehouseId) {
    Swal.fire({
        title: 'Delete Warehouse',
        text: 'Are you sure you want to delete this warehouse? This action cannot be undone.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, Delete',
        cancelButtonText: 'Cancel',
        confirmButtonColor: '#d33'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: 'warehouses.php',
                method: 'POST',
                data: {
                    action: 'delete_warehouse',
                    warehouse_id: warehouseId
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Deleted!',
                            text: response.message,
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        location.reload();
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: response.message,
                            icon: 'error'
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred while deleting the warehouse.',
                        icon: 'error'
                    });
                }
            });
        }
    });
}
</script>

    <script src="assets/js/app.js"></script>
</body>
</html>

<?php include 'layouts/main.php'; ?>

<head>
    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Warehouse Management')); ?>
    <?php include 'layouts/head-css.php'; ?>
    
    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
    
    <!-- SweetAlert2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    
    <!-- Remix Icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    
    <style>
        .warehouse-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .warehouse-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="20" y="20" width="60" height="60" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
            transform: rotate(45deg);
            animation: float 30s linear infinite;
        }
        
        @keyframes float {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }
        
        .warehouse-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .warehouse-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .warehouse-card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        
        .metric-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-left: 4px solid #667eea;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 60px;
            height: 60px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 50%;
            transform: translate(20px, -20px);
        }
        
        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .metric-value {
            font-size: 2rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }
        
        .metric-label {
            font-size: 0.875rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 500;
        }
        
        .status-badge {
            padding: 0.35rem 0.75rem;
            border-radius: 15px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .status-booked { background: #dbeafe; color: #1e40af; }
        .status-collected { background: #d1fae5; color: #065f46; }
        .status-in_transit { background: #fef3c7; color: #92400e; }
        .status-out_for_delivery { background: #e0e7ff; color: #5b21b6; }
        .status-delivered { background: #dcfce7; color: #166534; }
        .status-draft { background: #f3f4f6; color: #374151; }
        .status-confirmed { background: #dbeafe; color: #1e40af; }
        .status-departed { background: #fef3c7; color: #92400e; }
        .status-arrived { background: #d1fae5; color: #065f46; }
        
        .warehouse-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }
        
        .action-btn {
            padding: 0.35rem 0.75rem;
            border-radius: 8px;
            font-size: 0.75rem;
            margin: 0.1rem;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .btn-scan { background: #e3f2fd; color: #1976d2; }
        .btn-update { background: #e8f5e8; color: #2e7d32; }
        .btn-manifest { background: #fff3e0; color: #ef6c00; }
        .btn-view { background: #f3e5f5; color: #7b1fa2; }
        
        .action-btn:hover {
            transform: scale(1.05);
            text-decoration: none;
        }
        
        .scan-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 2px dashed #dee2e6;
        }
        
        .activity-item {
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
            transition: background-color 0.2s ease;
        }
        
        .activity-item:hover {
            background: #f8f9fa;
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-right: 1rem;
        }
        
        .activity-receive { background: #d1fae5; color: #065f46; }
        .activity-dispatch { background: #fef3c7; color: #92400e; }
        .activity-sort { background: #e0e7ff; color: #5b21b6; }
        .activity-other { background: #f3f4f6; color: #374151; }
        
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .quick-action {
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            text-decoration: none;
            color: #374151;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .quick-action:hover {
            border-color: #667eea;
            color: #667eea;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
            text-decoration: none;
        }
        
        .quick-action-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: #667eea;
        }
        
        .quick-action-title {
            font-weight: 600;
            font-size: 0.875rem;
        }
        
        .filter-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid #e9ecef;
        }
        
        .weight-indicator {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 600;
            background: #e3f2fd;
            color: #1976d2;
        }
        
        @media (max-width: 768px) {
            .warehouse-header {
                padding: 1.5rem;
                text-align: center;
            }
            
            .metric-card {
                text-align: center;
            }
            
            .metric-value {
                font-size: 1.5rem;
            }
            
            .quick-actions {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div id="layout-wrapper">
        <?php include 'layouts/menu.php'; ?>
        
        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    
                    <!-- Page Header -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                <h4 class="mb-sm-0"><i class="ri-building-line me-2"></i>Warehouse Management</h4>
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="index.php">Dashboard</a></li>
                                        <li class="breadcrumb-item"><a href="operations_dashboard.php">Operations</a></li>
                                        <li class="breadcrumb-item active">Warehouse</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Warehouse Header -->
                    <div class="warehouse-header">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h2 class="mb-1">Warehouse Operations Center</h2>
                                <p class="mb-0 opacity-90">
                                    Manage inventory, track shipments, and coordinate warehouse activities across all locations
                                </p>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <button class="btn btn-light btn-lg" onclick="exportWarehouseReport()">
                                    <i class="ri-download-line me-2"></i>Export Report
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="quick-actions">
                        <div class="quick-action" onclick="showScanModal()">
                            <div class="quick-action-icon"><i class="ri-qr-scan-line"></i></div>
                            <div class="quick-action-title">Scan Package</div>
                        </div>
                        <div class="quick-action" onclick="showCreateManifestModal()">
                            <div class="quick-action-icon"><i class="ri-file-list-3-line"></i></div>
                            <div class="quick-action-title">Create Manifest</div>
                        </div>
                        <div class="quick-action" onclick="showBulkUpdateModal()">
                            <div class="quick-action-icon"><i class="ri-refresh-line"></i></div>
                            <div class="quick-action-title">Bulk Update</div>
                        </div>
                        <div class="quick-action" onclick="viewInventoryReport()">
                            <div class="quick-action-icon"><i class="ri-bar-chart-box-line"></i></div>
                            <div class="quick-action-title">Inventory Report</div>
                        </div>
                        <div class="quick-action" onclick="showReceiveGoodsModal()">
                            <div class="quick-action-icon"><i class="ri-inbox-line"></i></div>
                            <div class="quick-action-title">Receive Goods</div>
                        </div>
                        <div class="quick-action" onclick="showDispatchModal()">
                            <div class="quick-action-icon"><i class="ri-truck-line"></i></div>
                            <div class="quick-action-title">Dispatch Goods</div>
                        </div>
                    </div>

                    <!-- Warehouse Statistics -->
                    <div class="row mb-4">
                        <?php while ($warehouse = $warehouse_stats->fetch_assoc()): ?>
                        <div class="col-xl-3 col-md-6">
                            <div class="warehouse-card">
                                <div class="card-body">
                                    <div class="warehouse-icon">
                                        <i class="ri-building-line"></i>
                                    </div>
                                    <h5 class="card-title"><?php echo $warehouse['warehouse_name']; ?></h5>
                                    <p class="text-muted mb-3"><?php echo $warehouse['city']; ?> | <?php echo $warehouse['warehouse_code']; ?></p>
                                    
                                    <div class="row text-center">
                                        <div class="col-6">
                                            <div class="metric-value" style="font-size: 1.5rem;"><?php echo number_format($warehouse['total_shipments']); ?></div>
                                            <div class="metric-label" style="font-size: 0.7rem;">Total Shipments</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="metric-value" style="font-size: 1.5rem;"><?php echo number_format($warehouse['current_weight'], 1); ?>kg</div>
                                            <div class="metric-label" style="font-size: 0.7rem;">Current Weight</div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        <div class="col-4">
                                            <small class="text-success"><?php echo $warehouse['collected_shipments']; ?> Collected</small>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-warning"><?php echo $warehouse['in_transit_shipments']; ?> Transit</small>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-info"><?php echo $warehouse['out_for_delivery']; ?> Delivery</small>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-3">
                                        <span class="badge bg-primary"><?php echo $warehouse['active_manifests']; ?> Active Manifests</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endwhile; ?>
                    </div>

                    <!-- Filter Section -->
                    <div class="filter-section">
                        <form method="GET" class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label for="warehouse" class="form-label">Warehouse</label>
                                <select class="form-select" name="warehouse" id="warehouse">
                                    <option value="">All Warehouses</option>
                                    <?php 
                                    $warehouses_result->data_seek(0);
                                    while ($wh = $warehouses_result->fetch_assoc()): 
                                    ?>
                                    <option value="<?php echo $wh['warehouse_id']; ?>" <?php echo $warehouse_filter == $wh['warehouse_id'] ? 'selected' : ''; ?>>
                                        <?php echo $wh['warehouse_name']; ?>
                                    </option>
                                    <?php endwhile; ?>
                                </select>
                            </div>
                            
                            <div class="col-md-2">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" name="status" id="status">
                                    <option value="">All Status</option>
                                    <option value="BOOKED" <?php echo $status_filter == 'BOOKED' ? 'selected' : ''; ?>>Booked</option>
                                    <option value="COLLECTED" <?php echo $status_filter == 'COLLECTED' ? 'selected' : ''; ?>>Collected</option>
                                    <option value="IN_TRANSIT" <?php echo $status_filter == 'IN_TRANSIT' ? 'selected' : ''; ?>>In Transit</option>
                                    <option value="OUT_FOR_DELIVERY" <?php echo $status_filter == 'OUT_FOR_DELIVERY' ? 'selected' : ''; ?>>Out for Delivery</option>
                                </select>
                            </div>
                            
                            <div class="col-md-2">
                                <label for="date_from" class="form-label">From Date</label>
                                <input type="date" class="form-control" name="date_from" id="date_from" value="<?php echo $date_from; ?>">
                            </div>
                            
                            <div class="col-md-2">
                                <label for="date_to" class="form-label">To Date</label>
                                <input type="date" class="form-control" name="date_to" id="date_to" value="<?php echo $date_to; ?>">
                            </div>
                            
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="ri-search-line me-1"></i>Filter
                                </button>
                            </div>
                            
                            <div class="col-md-1">
                                <a href="warehouse_management.php" class="btn btn-outline-secondary w-100">
                                    <i class="ri-refresh-line"></i>
                                </a>
                            </div>
                        </form>
                    </div>

                    <!-- Main Content -->
                    <div class="row">
                        <div class="col-xl-8">
                            <!-- Pending Shipments -->
                            <div class="warehouse-card">
                                <div class="card-header bg-transparent border-bottom">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h5 class="card-title mb-0">
                                            <i class="ri-package-line me-2"></i>Pending Shipments
                                        </h5>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-primary" onclick="selectAllShipments()">
                                                <i class="ri-check-double-line me-1"></i>Select All
                                            </button>
                                            <button class="btn btn-sm btn-outline-secondary" onclick="bulkUpdateSelected()">
                                                <i class="ri-refresh-line me-1"></i>Bulk Update
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="shipmentsTable">
                                            <thead>
                                                <tr>
                                                    <th width="40">
                                                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleAllCheckboxes()">
                                                    </th>
                                                    <th>Tracking #</th>
                                                    <th>Sender/Receiver</th>
                                                    <th>Route</th>
                                                    <th>Status</th>
                                                    <th>Weight</th>
                                                    <th>Date</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php while ($shipment = $pending_shipments->fetch_assoc()): ?>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="shipment-checkbox" value="<?php echo $shipment['shipment_id']; ?>">
                                                    </td>
                                                    <td>
                                                        <div class="fw-bold"><?php echo $shipment['tracking_number']; ?></div>
                                                        <small class="text-muted"><?php echo $shipment['service_name']; ?></small>
                                                    </td>
                                                    <td>
                                                        <div class="fw-bold"><?php echo $shipment['sender_name']; ?></div>
                                                        <small class="text-muted">to <?php echo $shipment['receiver_name']; ?></small>
                                                    </td>
                                                    <td>
                                                        <div><?php echo $shipment['origin_location']; ?></div>
                                                        <small class="text-muted">→ <?php echo $shipment['destination_location']; ?></small>
                                                    </td>
                                                    <td>
                                                        <span class="status-badge status-<?php echo strtolower($shipment['status']); ?>">
                                                            <?php echo ucfirst(strtolower(str_replace('_', ' ', $shipment['status']))); ?>
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span class="weight-indicator"><?php echo number_format($shipment['chargeable_weight'], 1); ?>kg</span>
                                                        <br><small class="text-muted"><?php echo $shipment['pieces']; ?> pcs</small>
                                                    </td>
                                                    <td>
                                                        <div><?php echo date('M j, Y', strtotime($shipment['booking_date'])); ?></div>
                                                        <?php if ($shipment['estimated_delivery']): ?>
                                                        <small class="text-muted">Est: <?php echo date('M j', strtotime($shipment['estimated_delivery'])); ?></small>
                                                        <?php endif; ?>
                                                    </td>
                                                    <td>
                                                        <div class="btn-group" role="group">
                                                            <button class="action-btn btn-scan" onclick="quickScan('<?php echo $shipment['tracking_number']; ?>')" 
                                                                    title="Quick Scan">
                                                                <i class="ri-qr-scan-line"></i>
                                                            </button>
                                                            <button class="action-btn btn-update" onclick="updateShipmentStatus(<?php echo $shipment['shipment_id']; ?>)" 
                                                                    title="Update Status">
                                                                <i class="ri-refresh-line"></i>
                                                            </button>
                                                            <a href="view_shipment.php?id=<?php echo $shipment['shipment_id']; ?>" 
                                                               class="action-btn btn-view" title="View Details">
                                                                <i class="ri-eye-line"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <?php endwhile; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Active Manifests -->
                            <div class="warehouse-card">
                                <div class="card-header bg-transparent border-bottom">
                                    <h5 class="card-title mb-0">
                                        <i class="ri-file-list-3-line me-2"></i>Active Manifests
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="manifestsTable">
                                            <thead>
                                                <tr>
                                                    <th>Manifest #</th>
                                                    <th>Type</th>
                                                    <th>Route</th>
                                                    <th>Departure</th>
                                                    <th>Items</th>
                                                    <th>Weight</th>
                                                    <th>Status</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php while ($manifest = $manifests_result->fetch_assoc()): ?>
                                                <tr>
                                                    <td>
                                                        <div class="fw-bold"><?php echo $manifest['manifest_number']; ?></div>
                                                        <small class="text-muted">by <?php echo $manifest['created_by_name']; ?></small>
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-info"><?php echo ucfirst($manifest['manifest_type']); ?></span>
                                                    </td>
                                                    <td>
                                                        <div><?php echo $manifest['origin_warehouse_name']; ?></div>
                                                        <small class="text-muted">→ <?php echo $manifest['destination_warehouse_name']; ?></small>
                                                    </td>
                                                    <td>
                                                        <div><?php echo date('M j, Y', strtotime($manifest['departure_date'])); ?></div>
                                                        <small class="text-muted"><?php echo date('H:i', strtotime($manifest['departure_date'])); ?></small>
                                                    </td>
                                                    <td><?php echo $manifest['item_count']; ?> items</td>
                                                    <td>
                                                        <span class="weight-indicator"><?php echo number_format($manifest['total_weight'], 1); ?>kg</span>
                                                    </td>
                                                    <td>
                                                        <span class="status-badge status-<?php echo strtolower($manifest['status']); ?>">
                                                            <?php echo ucfirst($manifest['status']); ?>
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <div class="btn-group" role="group">
                                                            <a href="view_manifest.php?id=<?php echo $manifest['manifest_id']; ?>" 
                                                               class="action-btn btn-view" title="View Manifest">
                                                                <i class="ri-eye-line"></i>
                                                            </a>
                                                            <button class="action-btn btn-manifest" onclick="updateManifestStatus(<?php echo $manifest['manifest_id']; ?>)" 
                                                                    title="Update Status">
                                                                <i class="ri-refresh-line"></i>
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <?php endwhile; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4">
                            <!-- Quick Scan Section -->
                            <div class="scan-section">
                                <h6 class="mb-3"><i class="ri-qr-scan-line me-2"></i>Quick Package Scan</h6>
                                <form id="quickScanForm">
                                    <div class="mb-3">
                                        <input type="text" class="form-control form-control-lg" 
                                               id="quickScanInput" placeholder="Enter tracking number..." 
                                               style="font-family: monospace;">
                                    </div>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <select class="form-select" id="quickScanAction">
                                                <option value="RECEIVE">Receive</option>
                                                <option value="SORT">Sort</option>
                                                <option value="DISPATCH">Dispatch</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <button type="submit" class="btn btn-primary w-100">
                                                <i class="ri-check-line me-1"></i>Scan
                                            </button>
                                        </div>
                                    </div>
                                </form>
                                <div id="scanResult" class="mt-3" style="display: none;"></div>
                            </div>

                            <!-- Recent Activities -->
                            <div class="warehouse-card">
                                <div class="card-header bg-transparent border-bottom">
                                    <h5 class="card-title mb-0">
                                        <i class="ri-time-line me-2"></i>Recent Activities
                                    </h5>
                                </div>
                                <div class="card-body p-0">
                                    <div style="max-height: 400px; overflow-y: auto;">
                                        <?php if ($activities_result->num_rows > 0): ?>
                                            <?php while ($activity = $activities_result->fetch_assoc()): ?>
                                            <div class="activity-item">
                                                <div class="d-flex align-items-start">
                                                    <div class="activity-icon activity-<?php echo strtolower($activity['event_type']); ?>">
                                                        <i class="ri-<?php 
                                                        echo match(strtolower($activity['event_type'])) {
                                                            'receive' => 'inbox-line',
                                                            'dispatch' => 'truck-line',
                                                            'sort' => 'organization-chart',
                                                            default => 'information-line'
                                                        };
                                                        ?>"></i>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <div class="fw-bold"><?php echo $activity['tracking_number']; ?></div>
                                                        <p class="mb-1 text-muted"><?php echo $activity['event_description']; ?></p>
                                                        <small class="text-muted">
                                                            <?php echo $activity['location']; ?> • 
                                                            <?php echo date('M j, H:i', strtotime($activity['event_date'])); ?> • 
                                                            <?php echo $activity['created_by_name']; ?>
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php endwhile; ?>
                                        <?php else: ?>
                                        <div class="text-center py-4">
                                            <i class="ri-time-line fs-2 text-muted"></i>
                                            <p class="text-muted mt-2">No recent activities</p>
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <?php include 'layouts/footer.php'; ?>
        </div>
    </div>

    <!-- Package Scan Modal -->
    <div class="modal fade" id="scanModal" tabindex="-1" aria-labelledby="scanModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scanModalLabel">
                        <i class="ri-qr-scan-line me-2"></i>Package Scanner
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="scanForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="scan_tracking_number" class="form-label">Tracking Number *</label>
                                <input type="text" class="form-control form-control-lg" 
                                       id="scan_tracking_number" name="tracking_number" 
                                       placeholder="Scan or enter tracking number..." 
                                       style="font-family: monospace;" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="scan_action" class="form-label">Action *</label>
                                <select class="form-select" id="scan_action" name="scan_action" required>
                                    <option value="RECEIVE">Receive Package</option>
                                    <option value="SORT">Sort Package</option>
                                    <option value="DISPATCH">Dispatch Package</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="scan_warehouse" class="form-label">Warehouse *</label>
                                <select class="form-select" id="scan_warehouse" name="warehouse_id" required>
                                    <?php 
                                    $warehouses_result->data_seek(0);
                                    while ($wh = $warehouses_result->fetch_assoc()): 
                                    ?>
                                    <option value="<?php echo $wh['warehouse_id']; ?>">
                                        <?php echo $wh['warehouse_name']; ?>
                                    </option>
                                    <?php endwhile; ?>
                                </select>
                            </div>
                            
                            <div class="col-12">
                                <label for="scan_notes" class="form-label">Notes</label>
                                <textarea class="form-control" id="scan_notes" name="notes" rows="3" 
                                         placeholder="Enter any additional notes..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-check-line me-1"></i>Process Scan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Create Manifest Modal -->
    <div class="modal fade" id="createManifestModal" tabindex="-1" aria-labelledby="createManifestModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createManifestModalLabel">
                        <i class="ri-file-list-3-line me-2"></i>Create New Manifest
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="createManifestForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="manifest_type" class="form-label">Manifest Type *</label>
                                <select class="form-select" id="manifest_type" name="manifest_type" required>
                                    <option value="TRUCK">Truck</option>
                                    <option value="FLIGHT">Flight</option>
                                    <option value="CONTAINER">Container</option>
                                    <option value="VESSEL">Vessel</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="departure_date" class="form-label">Departure Date *</label>
                                <input type="datetime-local" class="form-control" id="departure_date" 
                                       name="departure_date" required>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="origin_warehouse" class="form-label">Origin Warehouse *</label>
                                <select class="form-select" id="origin_warehouse" name="origin_warehouse" required>
                                    <?php 
                                    $warehouses_result->data_seek(0);
                                    while ($wh = $warehouses_result->fetch_assoc()): 
                                    ?>
                                    <option value="<?php echo $wh['warehouse_id']; ?>">
                                        <?php echo $wh['warehouse_name']; ?>
                                    </option>
                                    <?php endwhile; ?>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="destination_warehouse" class="form-label">Destination Warehouse *</label>
                                <select class="form-select" id="destination_warehouse" name="destination_warehouse" required>
                                    <?php 
                                    $warehouses_result->data_seek(0);
                                    while ($wh = $warehouses_result->fetch_assoc()): 
                                    ?>
                                    <option value="<?php echo $wh['warehouse_id']; ?>">
                                        <?php echo $wh['warehouse_name']; ?>
                                    </option>
                                    <?php endwhile; ?>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="vehicle_number" class="form-label">Vehicle Number</label>
                                <input type="text" class="form-control" id="vehicle_number" name="vehicle_number" 
                                       placeholder="Enter vehicle number...">
                            </div>
                            
                            <div class="col-md-6">
                                <label for="driver_name" class="form-label">Driver Name</label>
                                <input type="text" class="form-control" id="driver_name" name="driver_name" 
                                       placeholder="Enter driver name...">
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">Select Shipments</label>
                                <div id="manifestShipmentsContainer" class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                                    <div class="text-center py-4">
                                        <i class="ri-loader-4-line fs-2 text-muted"></i>
                                        <p class="text-muted mt-2">Loading available shipments...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">
                            <i class="ri-file-add-line me-1"></i>Create Manifest
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bulk Update Modal -->
    <div class="modal fade" id="bulkUpdateModal" tabindex="-1" aria-labelledby="bulkUpdateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bulkUpdateModalLabel">
                        <i class="ri-refresh-line me-2"></i>Bulk Update Shipments
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="bulkUpdateForm">
                    <div class="modal-body">
                        <div class="alert alert-info">
                            <i class="ri-information-line me-2"></i>
                            <span id="selectedCount">0</span> shipments selected for bulk update.
                        </div>
                        
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="bulk_status" class="form-label">New Status *</label>
                                <select class="form-select" id="bulk_status" name="status" required>
                                    <option value="COLLECTED">Collected</option>
                                    <option value="IN_TRANSIT">In Transit</option>
                                    <option value="OUT_FOR_DELIVERY">Out for Delivery</option>
                                    <option value="DELIVERED">Delivered</option>
                                </select>
                            </div>
                            
                            <div class="col-12">
                                <label for="bulk_location" class="form-label">Location</label>
                                <input type="text" class="form-control" id="bulk_location" name="location" 
                                       placeholder="Enter current location...">
                            </div>
                            
                            <div class="col-12">
                                <label for="bulk_description" class="form-label">Description</label>
                                <textarea class="form-control" id="bulk_description" name="description" rows="3" 
                                         placeholder="Enter update description..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">
                            <i class="ri-refresh-line me-1"></i>Update Selected
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <?php include 'layouts/vendor-scripts.php'; ?>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    
    <!-- SweetAlert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    
    <script>
$(document).ready(function() {
    // Initialize DataTables
    $('#shipmentsTable').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[6, 'desc']], // Sort by date
        columnDefs: [
            { targets: [0, 7], orderable: false }
        ]
    });

    $('#manifestsTable').DataTable({
        responsive: true,
        pageLength: 15,
        order: [[3, 'desc']] // Sort by departure date
    });

    // Quick scan form handler
    $('#quickScanForm').on('submit', function(e) {
        e.preventDefault();
        
        const trackingNumber = $('#quickScanInput').val().trim();
        const action = $('#quickScanAction').val();
        
        if (!trackingNumber) {
            Swal.fire('Error', 'Please enter a tracking number', 'error');
            return;
        }
        
        processQuickScan(trackingNumber, action);
    });

    // Package scan form handler
    $('#scanForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        formData.append('action', 'scan_package');
        
        Swal.fire({
            title: 'Processing Scan...',
            text: 'Please wait while we process the package scan.',
            icon: 'info',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        $.ajax({
            url: 'warehouse_management.php',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Scan Successful!',
                        text: response.message,
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    
                    $('#scanModal').modal('hide');
                    $('#scanForm')[0].reset();
                    location.reload();
                } else {
                    Swal.fire({
                        title: 'Scan Failed',
                        text: response.message,
                        icon: 'error'
                    });
                }
            },
            error: function() {
                Swal.fire({
                    title: 'Error',
                    text: 'An error occurred while processing the scan.',
                    icon: 'error'
                });
            }
        });
    });

    // Create manifest form handler
    $('#createManifestForm').on('submit', function(e) {
        e.preventDefault();
        
        const selectedShipments = [];
        $('#manifestShipmentsContainer input[type="checkbox"]:checked').each(function() {
            selectedShipments.push(this.value);
        });
        
        if (selectedShipments.length === 0) {
            Swal.fire('Error', 'Please select at least one shipment for the manifest.', 'error');
            return;
        }
        
        const formData = new FormData(this);
        formData.append('action', 'create_manifest');
        formData.append('shipment_ids', JSON.stringify(selectedShipments));
        
        Swal.fire({
            title: 'Creating Manifest...',
            text: 'Please wait while we create the manifest.',
            icon: 'info',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        $.ajax({
            url: 'warehouse_management.php',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Manifest Created!',
                        text: `Manifest ${response.manifest_number} has been created successfully.`,
                        icon: 'success',
                        showCancelButton: true,
                        confirmButtonText: 'View Manifest',
                        cancelButtonText: 'Stay Here'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.open(`view_manifest.php?id=${response.manifest_id}`, '_blank');
                        }
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: response.message,
                        icon: 'error'
                    });
                }
            },
            error: function() {
                Swal.fire({
                    title: 'Error',
                    text: 'An error occurred while creating the manifest.',
                    icon: 'error'
                });
            }
        });
    });

    // Bulk update form handler
    $('#bulkUpdateForm').on('submit', function(e) {
        e.preventDefault();
        
        const selectedShipments = [];
        $('.shipment-checkbox:checked').each(function() {
            selectedShipments.push(this.value);
        });
        
        if (selectedShipments.length === 0) {
            Swal.fire('Error', 'Please select shipments to update.', 'error');
            return;
        }
        
        const formData = new FormData(this);
        formData.append('action', 'bulk_update');
        formData.append('shipment_ids', JSON.stringify(selectedShipments));
        
        Swal.fire({
            title: 'Updating Shipments...',
            text: `Updating ${selectedShipments.length} shipments...`,
            icon: 'info',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        $.ajax({
            url: 'warehouse_management.php',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Update Successful!',
                        text: response.message,
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    
                    $('#bulkUpdateModal').modal('hide');
                    location.reload();
                } else {
                    Swal.fire({
                        title: 'Update Failed',
                        text: response.message,
                        icon: 'error'
                    });
                }
            },
            error: function() {
                Swal.fire({
                    title: 'Error',
                    text: 'An error occurred while updating shipments.',
                    icon: 'error'
                });
            }
        });
    });

    // Load available shipments when manifest modal opens
    $('#createManifestModal').on('shown.bs.modal', function() {
        loadAvailableShipments();
    });

    // Update selected count when checkboxes change
    $(document).on('change', '.shipment-checkbox', function() {
        updateSelectedCount();
    });
});

// Function definitions
function processQuickScan(trackingNumber, action) {
    $.ajax({
        url: 'warehouse_management.php',
        method: 'POST',
        data: {
            action: 'scan_package',
            tracking_number: trackingNumber,
            scan_action: action,
            warehouse_id: 1, // Default warehouse
            notes: 'Quick scan'
        },
        dataType: 'json',
        success: function(response) {
            const resultDiv = $('#scanResult');
            
            if (response.success) {
                resultDiv.html(`
                    <div class="alert alert-success">
                        <i class="ri-check-circle-line me-2"></i>
                        <strong>Scan Successful!</strong><br>
                        ${trackingNumber} - Status: ${response.new_status}
                    </div>
                `).show();
                
                $('#quickScanInput').val('').focus();
                
                // Reload table after short delay
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                resultDiv.html(`
                    <div class="alert alert-danger">
                        <i class="ri-error-warning-line me-2"></i>
                        <strong>Scan Failed!</strong><br>
                        ${response.message}
                    </div>
                `).show();
            }
        },
        error: function() {
            $('#scanResult').html(`
                <div class="alert alert-danger">
                    <i class="ri-error-warning-line me-2"></i>
                    <strong>Error!</strong><br>
                    Unable to process scan. Please try again.
                </div>
            `).show();
        }
    });
}

function showScanModal() {
    $('#scanModal').modal('show');
    setTimeout(() => {
        $('#scan_tracking_number').focus();
    }, 500);
}

function showCreateManifestModal() {
    $('#createManifestModal').modal('show');
}

function showBulkUpdateModal() {
    const selectedCount = $('.shipment-checkbox:checked').length;
    
    if (selectedCount === 0) {
        Swal.fire('Error', 'Please select shipments to update.', 'error');
        return;
    }
    
    $('#selectedCount').text(selectedCount);
    $('#bulkUpdateModal').modal('show');
}

function quickScan(trackingNumber) {
    $('#scan_tracking_number').val(trackingNumber);
    showScanModal();
}

function updateShipmentStatus(shipmentId) {
    Swal.fire({
        title: 'Update Shipment Status',
        html: `
            <div class="mb-3">
                <label class="form-label">New Status:</label>
                <select class="form-select" id="newStatus">
                    <option value="COLLECTED">Collected</option>
                    <option value="IN_TRANSIT">In Transit</option>
                    <option value="OUT_FOR_DELIVERY">Out for Delivery</option>
                    <option value="DELIVERED">Delivered</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Location:</label>
                <input type="text" class="form-control" id="statusLocation" 
                       placeholder="Enter current location...">
            </div>
            <div class="mb-3">
                <label class="form-label">Notes:</label>
                <textarea class="form-control" id="statusNotes" rows="3" 
                         placeholder="Enter any additional notes..."></textarea>
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: 'Update Status',
        preConfirm: () => {
            return {
                status: document.getElementById('newStatus').value,
                location: document.getElementById('statusLocation').value,
                notes: document.getElementById('statusNotes').value
            };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const { status, location, notes } = result.value;
            
            $.ajax({
                url: 'warehouse_management.php',
                method: 'POST',
                data: {
                    action: 'update_shipment_status',
                    shipment_id: shipmentId,
                    status: status,
                    location: location,
                    notes: notes
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Success',
                            text: response.message,
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        location.reload();
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'An error occurred while updating the status.', 'error');
                }
            });
        }
    });
}

function loadAvailableShipments() {
    const container = $('#manifestShipmentsContainer');
    
    container.html(`
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading available shipments...</p>
        </div>
    `);
    
    // Simulate loading available shipments
    setTimeout(() => {
        container.html(`
            <div class="row g-2">
                <div class="col-12">
                    <div class="form-check border rounded p-3">
                        <input class="form-check-input" type="checkbox" value="1" id="shipment_1">
                        <label class="form-check-label w-100" for="shipment_1">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <strong>TRK2025001</strong>
                                    <p class="mb-1">Electronics Equipment</p>
                                    <small class="text-muted">Nairobi → Mombasa • Jan 15, 2025</small>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold">25.5kg</div>
                                    <small class="text-muted">3 pieces</small>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-check border rounded p-3">
                        <input class="form-check-input" type="checkbox" value="2" id="shipment_2">
                        <label class="form-check-label w-100" for="shipment_2">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <strong>TRK2025002</strong>
                                    <p class="mb-1">Clothing and Textiles</p>
                                    <small class="text-muted">Nairobi → Kisumu • Jan 16, 2025</small>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold">12.3kg</div>
                                    <small class="text-muted">5 pieces</small>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="mt-3 text-center">
                <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="selectAllManifestShipments()">
                    Select All
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearAllManifestShipments()">
                    Clear All
                </button>
            </div>
        `);
    }, 1000);
}

function selectAllManifestShipments() {
    $('#manifestShipmentsContainer input[type="checkbox"]').prop('checked', true);
}

function clearAllManifestShipments() {
    $('#manifestShipmentsContainer input[type="checkbox"]').prop('checked', false);
}

function toggleAllCheckboxes() {
    const masterCheckbox = document.getElementById('selectAllCheckbox');
    const checkboxes = document.querySelectorAll('.shipment-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = masterCheckbox.checked;
    });
    
    updateSelectedCount();
}

function selectAllShipments() {
    document.getElementById('selectAllCheckbox').checked = true;
    toggleAllCheckboxes();
}

function bulkUpdateSelected() {
    showBulkUpdateModal();
}

function updateSelectedCount() {
    const selectedCount = $('.shipment-checkbox:checked').length;
    $('#selectedCount').text(selectedCount);
    
    // Update master checkbox state
    const totalCheckboxes = $('.shipment-checkbox').length;
    const masterCheckbox = document.getElementById('selectAllCheckbox');
    
    if (selectedCount === 0) {
        masterCheckbox.indeterminate = false;
        masterCheckbox.checked = false;
    } else if (selectedCount === totalCheckboxes) {
        masterCheckbox.indeterminate = false;
        masterCheckbox.checked = true;
    } else {
        masterCheckbox.indeterminate = true;
    }
}

function viewInventoryReport() {
    window.open('reports/inventory_report.php', '_blank');
}

function showReceiveGoodsModal() {
    Swal.fire({
        title: 'Receive Goods',
        text: 'This feature will allow you to receive and process incoming shipments.',
        icon: 'info',
        confirmButtonText: 'Coming Soon'
    });
}

function showDispatchModal() {
    Swal.fire({
        title: 'Dispatch Goods',
        text: 'This feature will allow you to prepare and dispatch outgoing shipments.',
        icon: 'info',
        confirmButtonText: 'Coming Soon'
    });
}

function updateManifestStatus(manifestId) {
    Swal.fire({
        title: 'Update Manifest Status',
        html: `
            <div class="mb-3">
                <label class="form-label">New Status:</label>
                <select class="form-select" id="manifestStatus">
                    <option value="CONFIRMED">Confirmed</option>
                    <option value="DEPARTED">Departed</option>
                    <option value="ARRIVED">Arrived</option>
                    <option value="CLOSED">Closed</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Notes:</label>
                <textarea class="form-control" id="manifestNotes" rows="3" 
                         placeholder="Enter any additional notes..."></textarea>
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: 'Update Status'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire('Success', 'Manifest status updated successfully.', 'success');
        }
    });
}

function exportWarehouseReport() {
    Swal.fire({
        title: 'Export Warehouse Report',
        html: `
            <div class="mb-3">
                <label class="form-label">Report Type:</label>
                <select class="form-select" id="reportType">
                    <option value="summary">Warehouse Summary</option>
                    <option value="inventory">Inventory Report</option>
                    <option value="activities">Activity Log</option>
                    <option value="manifests">Manifest Report</option>
                    <option value="comprehensive">Comprehensive Report</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Format:</label>
                <select class="form-select" id="exportFormat">
                    <option value="pdf">PDF Report</option>
                    <option value="excel">Excel Workbook</option>
                    <option value="csv">CSV Data</option>
                </select>
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: 'Generate Report',
        preConfirm: () => {
            return {
                type: document.getElementById('reportType').value,
                format: document.getElementById('exportFormat').value
            };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const { type, format } = result.value;
            
            Swal.fire({
                title: 'Generating Report...',
                text: 'Please wait while we compile your warehouse report.',
                icon: 'info',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                    setTimeout(() => {
                        Swal.close();
                        
                        // Trigger download
                        const link = document.createElement('a');
                        link.href = `reports/warehouse_report.php?type=${type}&format=${format}`;
                        link.download = `warehouse_${type}_${new Date().toISOString().split('T')[0]}.${format}`;
                        link.click();
                        
                        Swal.fire({
                            title: 'Report Generated!',
                            text: 'Your warehouse report has been generated and downloaded.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }, 2000);
                }
            });
        }
    });
}

// Auto-focus on tracking input
$('#quickScanInput').focus();

// Enable barcode scanner support (if available)
if ('BarcodeDetector' in window) {
    console.log('Barcode scanner support available');
    // Add barcode scanner functionality here
}
</script>

    <!-- App js -->
    <script src="assets/js/app.js"></script>
</body>
</html>